React bootstrap modal button doesnt fire off onClick method even after enabling button

Question

The button is disabled at the start and only enabled after the input checkbox is checked. The problem I am having is that the onClick on my button doesn't work even after I set the disabled to false, the onClick method works when I delete the disabled tag.

const [show, setShow] = useState(false)

useEffect(() =>{
//I do an api call here but for simplicity just assume the modal always shows at the start
setShow(true)
}, [])

//Close the modal
const handleClose = () => setShow(false);

//This function will make the button available depending if the user has accepted the conditions.
const enableButton = (enabled) =>{
    if (enabled){
        document.getElementById("btn").disabled = false;
    } else document.getElementById("btn").disabled = true;

<Modal show={show} onHide={() => history.push("/")}>
          <Modal.Header closeButton>
            <Modal.Title>Gebruiksvoorwaarden</Modal.Title>
          </Modal.Header>
          <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </Modal.Body>
          <Modal.Body>
              <input id="check" type="checkbox" onChange={() => enableButton(document.getElementById("check").checked)}></input>
          </Modal.Body>
          <Modal.Footer>
            <Button id="btn" variant="danger" disabled onClick={() => handleClose()} >
              Accept
            </Button>
          </Modal.Footer>
</Modal>

The modal should close after pressing the button. Thanks for helping!

Answer 1

You are passing a disabled prop without value, which means the value will always be true .

Apparently you do not quite understand correctly how the properties of the components in the ReactJS work. The way you are trying to change the property will not give the expected effect because you are changing the property of the DOM object, not the component .

You can try store, change and pass your disabled value using useState like this:

const [show, setShow] = useState(false);
const [disabled, setDisabled] = useState(true);

useEffect(() =>{
    setShow(true);
}, []);

const handleClose = () => setShow(false);

const toggleButton = () => setDisabled(!disabled);

return (
    <Modal show={show} onHide={() => history.push("/")}>
        <Modal.Header closeButton>
            <Modal.Title>Gebruiksvoorwaarden</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </Modal.Body>
        <Modal.Body>
            <input id="check" type="checkbox" onChange={toggleButton}></input>
        </Modal.Body>
        <Modal.Footer>
            <Button id="btn" variant="danger" disabled={disabled} onClick={handleClose}>
                Accept
            </Button>
        </Modal.Footer>
    </Modal>
);