document.getElementById is not changing the styles dynamically in my React component

Question

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";
}

I have tried creating sample. It works fine: codesandbox.io/s/stupefied-resonance-mqw3m Try checking what is the value ofitem,index in handleAddSwitch — Shubham Verma
– Shubham Verma, Commented Oct 14, 2021 at 11:57

Ali Yaghoubi · Accepted Answer · 2021-10-14 11:57:19Z

2

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";
}

answered Oct 14, 2021 at 11:57

Ali Yaghoubi

1,29010 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user17105276 Over a year ago

it worked but it deleted the icon <CircleCheckIcon />, how do I solve this?

Ali Yaghoubi Over a year ago

insert Add to span element then: e.target.children[1].innerHTML = "...";

user17105276 Over a year ago

e.target.children[1] is undefined

Ali Yaghoubi Over a year ago

at the first, append Add to span, then Log it: e.target.children

Ali Yaghoubi Over a year ago

@Nour If it works, please confirm it

Collectives™ on Stack Overflow

document.getElementById is not changing the styles dynamically in my React component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related