I am using react-modal but my button to close the modal is not firing the onClick={this.handleCloseModal} making the button inside the modal pletely unresponsive. I have been trying different things for hours and cannot figure out why this is not working. No errors pop up in console and I cannot console log anything.... Please see code below, I have just been beating my head against a wall with no answers. I am fairly new to react but feel like this should be working as there are no errors. Thank you in advance!

  class Project extends React.Component {
    constructor () {
        super();
            this.state = {
              showModal: false
        };


    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
}

handleOpenModal () {
    this.setState({ showModal: true });
}

handleCloseModal () {
    this.setState({ showModal: false });
}

ponentWillMount() {
    ReactModal.setAppElement('body');
}

    render() {
        const details = this.props.details;

        return (
            <li className="Project" onClick={this.handleOpenModal}>
                <img className="Project-image" src={'projects/' + details.image} alt={details.name}/>
                <div className="Project-overlay">
                    <p>{details.name}</p>
                </div>
                <div >
                    <ReactModal 
                    isOpen={this.state.showModal} 
                    contentLabel="This is my Mods" 
                    shouldCloseOnOverlayClick={true}
                    onRequestClose={this.handleCloseModal}
                    >
                    <div className="modal-header">
                        <h3>{details.name}</h3>
                    </div>
                    <div className="modal-body">
                    </div>
                    <div className="modal-footer">
                        <button onClick={this.handleCloseModal}>Close Modal</button>
                    </div>
                    </ReactModal>

                </div>
                <div className="Project-tag">
                    <p>{details.tag}</p>
                </div>
            </li>
        )
    }
}

I am using react-modal but my button to close the modal is not firing the onClick={this.handleCloseModal} making the button inside the modal pletely unresponsive. I have been trying different things for hours and cannot figure out why this is not working. No errors pop up in console and I cannot console log anything.... Please see code below, I have just been beating my head against a wall with no answers. I am fairly new to react but feel like this should be working as there are no errors. Thank you in advance!

  class Project extends React.Component {
    constructor () {
        super();
            this.state = {
              showModal: false
        };


    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
}

handleOpenModal () {
    this.setState({ showModal: true });
}

handleCloseModal () {
    this.setState({ showModal: false });
}

ponentWillMount() {
    ReactModal.setAppElement('body');
}

    render() {
        const details = this.props.details;

        return (
            <li className="Project" onClick={this.handleOpenModal}>
                <img className="Project-image" src={'projects/' + details.image} alt={details.name}/>
                <div className="Project-overlay">
                    <p>{details.name}</p>
                </div>
                <div >
                    <ReactModal 
                    isOpen={this.state.showModal} 
                    contentLabel="This is my Mods" 
                    shouldCloseOnOverlayClick={true}
                    onRequestClose={this.handleCloseModal}
                    >
                    <div className="modal-header">
                        <h3>{details.name}</h3>
                    </div>
                    <div className="modal-body">
                    </div>
                    <div className="modal-footer">
                        <button onClick={this.handleCloseModal}>Close Modal</button>
                    </div>
                    </ReactModal>

                </div>
                <div className="Project-tag">
                    <p>{details.tag}</p>
                </div>
            </li>
        )
    }
}

• javascript
• reactjs
• react-modal

• Just to be clear, you can still close the modal by clicking on the overlay, correct? Meaning its onRequestClose prop is working, and by extension so does your handler? – Thomas Hennes Commented Nov 30, 2017 at 21:27
• correct, the onRequestClose prop works but the button remains unresponsive – SpaghettiBathtub Commented Nov 30, 2017 at 21:50
• could you provide a live version of your code in jsbin? – link0047 Commented Nov 30, 2017 at 22:02
• I believe I am setting the state incorrectly on the handleCloseModal function. I am just not sure why it does not work... – SpaghettiBathtub Commented Nov 30, 2017 at 22:30
• Your handleCloseModal function is fine, otherwise the onRequestClose prop would not work. That was the purpose of my question. I think Arber's answer is the most promising lead. Either the li tag onClick's handler captures the event and your button tag onClick's handler is never called, or it is called but the event bubbles down to the li tag handler anyway (so the modal would close & reopen instantly, maybe too fast for you to notice). You could also place a console.log or even a window.alert statement in both of your handlers to track when each is in fact called. – Thomas Hennes Commented Dec 1, 2017 at 10:33

1 Answer 1

Try removing the modal outside of the li tag? I'm just taking a wild guess here, perhaps it's triggering onClick={this.handleOpenModal} wherever you click on the Modal since it's child of the list item?? Worth a try :)