Невозможно закрыть реактивный модал при определенных условиях

Question

Здравствуйте, я хочу закрыть Модальное, когда условие выполнено (this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue), но я не могу закрыть это, я не знаю почему. Я потратил больше времени на решение этой проблемы, это код:

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

в состоянии у меня есть showModal: false, функция handleModal внутри есть this.setState({ showModal: !this.state.showModal });

Answer 1

Вам не нужно присваивать ReactModal переменной. Просто используйте его в функции рендеринга следующим образом:

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

Answer 2

Вам нужно использовать состояние showModal и поместить его в реквизит isOpen

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