Method render

examples/basic/simple_usage/index.js:55–85

()

  }

  render() {
    const { currentModal } = this.state;

    return (
      <div>
        <button type="button" className="btn btn-primary" onClick={this.toggleModal(MODAL_A)}>Open Modal A</button>
        <button type="button" className="btn btn-primary" onClick={this.toggleModal(MODAL_B)}>Open Modal B</button>
        <MyModal
          title={this.state.title1}
          isOpen={currentModal == MODAL_A}
          onAfterOpen={this.handleOnAfterOpenModal}
          onRequestClose={this.handleModalCloseRequest}
          askToClose={this.toggleModal(MODAL_A)}
          onChangeInput={this.handleInputChange} />
        <Modal
          ref="mymodal2"
          id="test2"
          aria={{
            labelledby: "heading",
            describedby: "fulldescription"
          }}
          closeTimeoutMS={150}
          contentLabel="modalB"
          isOpen={currentModal == MODAL_B}
          shouldCloseOnOverlayClick={false}
          onAfterOpen={this.handleOnAfterOpenModal}
          onRequestClose={this.toggleModal(MODAL_B)}>
          <h1 id="heading" ref={h1 => this.heading = h1}>This is the modal 2!</h1>
          <div id="fulldescription" tabIndex="0" role="document">
            <p>This is a description of what it does: nothing :)</p>
            <button onClick={this.toggleModal(MODAL_B)}>close</button>
          </div>
        </Modal>
      </div>