How to open/close react-bootstrap modal programmatically?

Question

I need to open/close modal like

$(element).modal(\'show\')

How to do that?

Answer 1

Your modal will have a show prop and an onHide prop to determine when it's displayed. E.g.:

The onHide function simply changes showModal state property. Your modal is shown/hidden based on the parent's state:

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

If you'd like to close the modal from within the modal itself, you can trigger the onHide function defined on the parent via props. For example, this is a button somewhere inside the modal closing it:

  ×

Here is a fiddle simulating this workflow.