Unable to close the react-modal on certain condition

Question

Hello i want close Modal when condition has been met (this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue), but i can't close this i dont know why. I spent more time for resolve this problem, this is a code:

let modalShow;
    if(this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue) {
        modalShow = (
            <ReactModal
                isOpen={true}
                contentLabel="Minimal Modal Example"
                ariaHideApp={false}
            >
                <button onClick={this.handleModal}>Close Modal</button>
            </ReactModal>
        );
    }else {
        modalShow = (
            <ReactModal
                isOpen={false}
                contentLabel="Minimal Modal Example"
                ariaHideApp={false}
            >
                <button onClick={this.handleModal}>Close Modal</button>
            </ReactModal>
        )
    }

in state i have showModal: false, handleModal function inside have this.setState({ showModal: !this.state.showModal });

score 0 · Answer 1 · answered Feb 08 '20 at 13:07

0

You need to use your showModal state and put it in the isOpen props

 const { showModal } = this.state
<ReactModal
  isOpen={showModal}
  contentLabel="Minimal Modal Example"
  ariaHideApp={false}
>
  <button onClick={this.handleModal}>Close Modal</button>
</ReactModal>

answered Feb 08 '20 at 13:07

alexsouye

700
8
19

this code doesnt display modal I saw that in my code modal display after condition but never change showModal value for true and i dont know how i can do this. – RetupK Feb 08 '20 at 13:16

lomse · Answer 2 · 2020-02-08T14:05:46.467

0

You don't need to assign the ReactModal to a variable. Simply using it in the render function like this:

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

handleOpenModal() {
    const showModal = this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue

    this.setState({showModal})
}

render(){
    const {showModal} = this.state
    return(
       <ReactModal
           isOpen={showModal}
           contentLabel="Minimal Modal Example"
           ariaHideApp={false}
        >
           <button onClick={this.handleModal}>Close Modal</button>
       </ReactModal>
    )
}

edited Feb 08 '20 at 14:05

answered Feb 08 '20 at 13:14

lomse

4,045
6
47
68

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/207467/discussion-on-answer-by-lomse-unable-to-close-the-react-modal-on-certain-conditi). – Bhargav Rao Feb 08 '20 at 18:54

Unable to close the react-modal on certain condition

2 Answers2