How to use multiple modal in the same page?

Question

class dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      msg: false
    }
  }
  handelModal1() {
    this.setState({ show: !this.state.show })
  }
  handelModal2() {
    this.setState({ msg: !this.state.msg })
  }

  render() {
    return (
    <div>
      <>
        <Button variant="primary" onClick={() => { this.handelModal1() }} 
          one
        </Button>

        <Modal show={this.state.show} >
          <Modal.Header>
            <Modal.Title>Modal one</Modal.Title>
          </Modal.Header>
          <Modal.Body> hello </Modal.Body>
          <Modal.Footer>
            <Button onClick={() => { this.handelModal1() }}>
              OK
           </Button>
          </Modal.Footer>
        </Modal>
      </>
    </div>

    <div>
      <>
        <Button variant="primary" onClick={() => { this.handelModal2() }}
          two
        </Button>

        <Modal msg={this.state.msg} >
          <Modal.Header>
            <Modal.Title>Modal two</Modal.Title>
          </Modal.Header>
          <Modal.Body> hello </Modal.Body>
          <Modal.Footer>
            <Button onClick={() => { this.handelModal2() }}>
              OK
            </Button>
          </Modal.Footer>
        </Modal>
      </>
   </div>
  )
}

I am trying to use two modals on the same page. The first modal is working and I'm getting the pop-up, but the second modal is now working. There is no pop up when I click on the second modal. Is there any simple way to use two modals on the same page???

From the first modal, it seems your modal is controlled with a prop `show={this.state.show}`. In the 2nd modal set `show={this.state.msg}` instead of `msg={this.state.msg}`. I'm making assumptions on the Modal prop `show` since I don't know it's internal implementation. — kimobrian254, Oct 21 '20 at 11:47
What do you mean the same as the first modal? Maybe you can add some screenshots on the question for clarity — kimobrian254, Oct 21 '20 at 12:15

zahra zamani · Answer 1 · 2020-10-21T12:19:05.823

0

You have to set <Modal show={this.state.msg} > Instead<Modal msg={this.state.msg} >

or

Maybe this link will help you React Rendering Multiple Modals in Same Component

edited Oct 21 '20 at 12:19

answered Oct 21 '20 at 11:55

zahra zamani

1,323
10
27

It results the same as first modal – Manasa R Oct 21 '20 at 12:10

How to use multiple modal in the same page?

1 Answers1