Tengo un botón para el que necesito el color de fondo y el texto interno al hacer clic. Probé el método document.getElementById pero no está aplicando los cambios. ¿Cómo resuelvo este problema?
<TableBody> { records === null ? [] : records.map((item, index) => ( <button className="addToggle" id={"addToggle" + index} onClick={() => handleAddSwitch(item, index)}> <CircleCheckIcon /> Add </button> )) } </TableBody> function handleAddSwitch(item, index) { document.getElementById("addToggle" + index).style.backgroundColor = "red"; document.getElementById("addToggle" + index).innerHTML= "Added"; }Puede usar event.target O event.currentTarget :
<button className="addToggle" id={"addToggle" + index} onClick={(e) => handleAddSwitch(e, index)}> <CircleCheckIcon /> Add </button>Función
const handleAddSwitch(e, index) => { e.target.style.backgroundColor = "red"; e.target.innerHTML= "Added"; }