en REACT: dentro de una tabla tengo dos botones pero no le puedo cambiar el nombre de los eventos, dado la particularidad de mi caso,(ACA NO ESTA COMPLETO ES UN EJEMPLO)
como puedo saber a que boton le di click para luego realizar el evento que quiero? sin cambiar el mismo nombre, lo quiero hacer como un componente controlado
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td> <button onClick={agregarClick}>Btn Uno </button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td> <button onClick={agregarClick}>Btn dos </button></td>
</tr>
</tbody>
</table>
//evento OnCLICK
const agregarClick = () => {
//necesito hacer algo aca que me identifique cual de los dos botones pulse
};
Edicion: Explico mejor la situacion
en REACT
en un buscador de canciones lo que hice aca es que me muestre una tabla de resultados si lo que se escribio en el input coincide con algo de la const "canciones" si coincide me van a aparecer los resultados, y en cada resultado me va a aparecer un boton para agregar esa cancion a otra tabla
tengo un unico boton que yo escribo,me va a aparecer cada vez que me saltan mis resultados en la tabla, es un unico boton que escribo, pero luego necesito identificar a cual le di onClick ya que tiene el mismo nombre del evento cada vez que tengo un resultado, necesito saber a cual boton le di y luego poder mostrar todo el resultado de ese array en una nueva tabla.
aclaro que tambien estoy usando Material ui
gracias, espero la respuesta
const canciones = [
{
uuid: "1",
name: "Clara",
duration: "3:15",
artist: {
name: "NTVG"
}
},
{
uuid: "2",
name: "El viejo",
duration: "3:20",
artist: {
name: "La vela"
}
},
{
uuid: "3",
name: "Hoy estoy raro",
duration: "3:00",
artist: {
name: "El cuarteto"
}
}
];
export const CreatorPlayList = (props) => {
/*states */
const [inputValue, setInputValue] = useState("");
const [listaFiltrada, setListaFiltrada] = useState([]);
/*onChange */
const handleInputChange = (e) => {
console.log("Se ejecuta handleInputChange y actualiza el inputValue");
setInputValue(e.target.value);
};
const filtrarCanciones = (cancion) => {
// Aca filtro las canciones que coinciden con la busqueda
if (cancion.name.includes(inputValue)) {
return true;
} else {
return false;
}
};
/*evento al presionar Tecla enter */
const handleInputKeyPress = (e) => {
if (e.key === "Enter") {
// primero me quedo con los resultados filtrados
const resultados = cancion.filter(filtrarCanciones);
console.log("Tenemos el array con los resultados filtrados:");
console.log(resultados);
// despues actualizo el estado con esos resultados
setListaFiltrada(resultados);
console.log("Se actualiza el estado de las canciones a mostrar");
console.log(resultados);
}
};
/*evento OnClick */
const agregarClick = (e, cancion) => {
//aca nose bien como hacer que me de ese valor para luego devolver el array y mostrarlo
};
return (
<div>
<Input
onChange={handleInputChange}
placeholder="Buscar"
onKeyPress={handleInputKeyPress}
value={inputValue}
/>
<div>
<TableContainer>
<Table>
<TableHead>Resultados</TableHead><TableHead>
<TableRow>
<TableCell>Nombre</TableCell>
<TableCell>Artista</TableCell>
<TableCell>Album</TableCell>
<TableCell>Duracion</TableCell>
<TableCell>Agregar</TableCell>
</TableRow>
</TableHead>
<TableBody>
{
// recorro la lista filtrada que tengo en el estado
listaFiltrada.map((resultados) => (
<TableRow key={resultados.uuid}>
{/*Esta es la tabla que debe aparecer si se encuentra un archivo */}
<TableCell align="center">{resultados.name}</TableCell>
<TableCell align="center">
{resultados.artist.name}
</TableCell>
<TableCell align="center">{resultados.album}</TableCell>
<TableCell align="center">{resultados.duration}</TableCell>
<TableCell align="center">
{" "}
{/*este boton me va a aparecer cada vez que me saltan mis resultados en la tabla, es un unico boton que escribo, pero luego necesito identificar a cual le di onClick ya que tiene el mismo nombre del evento, pero cada uno tiene un Array distinto que lo voy llamando con resultados.name etc */}
<button onClick={agregarClick}>
</button>
</TableCell>
</TableRow>
))
}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
);
};