title: How to open bootstrap modal in react component?
body: <p>Have a react component. Need to open bootstrap modal on page load. Tried using jQuery and simple javascript but with no success.</p>
  
  <p>React Component:</p>
  
  <pre><code>import React, { Component } from 'react'
  import $ from 'jquery'
  
  class Login extends Component {
    componentDidMount() {
      // here I want to open modal
    }
  
    render() {
      return (
        &lt;div className="modal fade WelcomeModal" id="WelcomeModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
          &lt;div className="modal-dialog modal-dialog-centered" role="document"&gt;
            &lt;div className="modal-content"&gt;
              &lt;div className="modal-header"&gt;
                &lt;div className="camera-box"&gt;
                  &lt;img alt="" src="/img/yellow-logo.svg"/&gt;
                  &lt;h5 className="modal-title" id="exampleModalLabel"&gt;Welcome to the Cozy App!&lt;/h5&gt;
                &lt;/div&gt;                             
              &lt;/div&gt;
              &lt;div className="modal-body"&gt;
                &lt;p className="text-center"&gt;On the following screens weʼll ask you to register the Cozys in your home &amp; adjust your temperature settings. Youʼll need the following information:&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>