I have a button that I need the background color and inner text to on click. I tried the document.getElementById method but it is not applying the changes. How to I solve this issue?
<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";
}
You can use event.target OR event.currentTarget:
<button className="addToggle" id={"addToggle" + index} onClick={(e) => handleAddSwitch(e, index)}>
<CircleCheckIcon />
Add
</button>
Function
const handleAddSwitch(e, index) => {
e.target.style.backgroundColor = "red";
e.target.innerHTML= "Added";
}