button onClick doesn't work when disabled=True is initialized (Reactjs)

Question

I have a button which I initialize as disabled that I enable when another event happens. But when I click on it the onClick function isn't called.

<div className='button-parent'>
    <button id="saveButton" type="button" onClick={updateBill} disabled={true} className="button">Save</button>
</div>

I have the opacity change when it's enabled, so I'm sure it's enabled when I try to press it and it doesn't work.

I'm sure the function is fine as when I add the onClick to the parent element, it works fine.

How are you re-enabling the button? `disabled` is set to a perpetual `true` — Phix, Sep 29 '21 at 17:14
The error is not here. This works for me: https://wfzg9.csb.app/ — Newbie, Sep 29 '21 at 17:15

score 1 · Answer 1 · answered Sep 29 '21 at 17:16

Use a state to manage the disabled condition instead of hardcoding it to true.

const [isDisabled, setIsDisabled] = useState(true)

<button id="saveButton" type="button" onClick={updateBill} disabled={isDisabled} className="button">Save</button>

When your other event happens and you want to enable it just

setIsDisabled(false)

score 1 · Accepted Answer · answered Sep 29 '21 at 17:37

You can make something like this :

const [enable, setEnable] = useState(true);

<button id="saveButton" type="button" disabled={enable} className="button">Save</button>

You can call the function to update the state and you can use the following to update state :

setEnable(!enable).

This will toggle the state and enable or disable the button using the previous state.

button onClick doesn't work when disabled=True is initialized (Reactjs)

2 Answers2

Linked