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.
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)
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.