Using bootstrap modal() in React.js

Question

I am using a bootstrap modal in my react component like so...

<button data-toggle="modal" data-target="#myModal">
  Let's Start
</button>
  <div id="myModal" className="modal fade" tabindex="-1" data-backdrop="static" role="dialog" >
    <div className="modal-dialog modal-dialog-centered" style={{overflowY:"initial !important"}}>
      <div class="modal-content" style={{width:"fit-content"}} >
        <div className="modal-header">
          <Header icon="add to calendar" content="Modal Header" />
          <button type="button" className="close" data-dismiss="modal">&times;</button>
        </div>
        <div className="modal-body" style={{overflowY:"auto",padding:"4em"}}>
          Body Here
        </div>
        <div className="modal-footer">
          <button onClick={this.handleClick}>Submit</button>
        </div>  
      </div>
    </div>
  </div>

The modal contains a form and the button in the footer handles submit. I want to validate the input and close the modal only if validation is successful or else display an error message. How do I close the modal from inside a function?

What I have tried (and what went wrong) :

• jQuery for react (.modal is not a function)
• react-bootstrap-modal (doesn't work with my versions)
• creating a reactRef for the modal and accessing modal() through ref (simply doesn't work)
• document.getElementById("myModal").modal("toggle") (turns out it's useless with virtualDOM)
• Semantic UI Modal (acts wierd when used with bootstrap)

Is there any way at all I can achieve this with just react and bootstrap?

Help is much appreciated. Thanks.

Answer 1

You can try my solution.

1. Create a Modal component which has inputs, submit, cancel button.
2. When you submit this Modal, validate its data. If the data is valid, trigger a func prop to parent component to hide this modal.