React-Modal Close button not working

Question

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 completely 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 });
}

componentWillMount() {
    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>
        )
    }
}

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, Nov 30 '17 at 21:27
correct, the onRequestClose prop works but the button remains unresponsive — SpaghettiBathtub, Nov 30 '17 at 21:50
I believe I am setting the state incorrectly on the handleCloseModal function. I am just not sure why it does not work... — SpaghettiBathtub, Nov 30 '17 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, Dec 01 '17 at 10:33

score 2 · Answer 1 · answered Nov 30 '17 at 21:27

2

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

answered Nov 30 '17 at 21:27

Arber Sylejmani

2,078
1
16
20

to be clear, this is for a portfolio so the li is repeating all of the projects. so moving it outside the li would defeat the purpose as all of the projects need a modal to be displayed – SpaghettiBathtub Nov 30 '17 at 21:50
then provide us with a JSFiddle or something!? – Arber Sylejmani Nov 30 '17 at 23:17
You could still temporarily remove the onClick handler from the list tag and open the modal from a simple link or button, for testing purposes. Another idea would be to block the click event propagation in both handlers to see if it helps. – Thomas Hennes Dec 01 '17 at 03:31
yeah, as Jaxx said, it won't hurt to at least give it a try and see if it works, then there are other ways to implement it, for example add the modal and the rest of li content in two separate divs under li, then add the onClick for opening it to the div that is not holding the modal. Again, worth a try ;) – Arber Sylejmani Dec 01 '17 at 06:51

React-Modal Close button not working

1 Answers1