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

Issue

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.

Solution

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.

Answered By - Ishan Kesharwani