title: React hook: How to call Modal component from another component in react
body: <p>I am trying to create a modal that I can reuse/call from multiple components. I want the modal to display in app.js but the button call is on another component.</p>
  <p>Once I am able to implement one, I can but button on other components and call same modal instead of having to create the same modal for each component</p>
  <pre><code>&lt;div className=&quot;App&quot;&gt;
        &lt;HeroSlider /&gt;
        &lt;HowItWorks /&gt;
        &lt;Modal /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
  
  </code></pre>
  <p>The modal button is on this component(HeroSlider). Once its click it will call the modal component and display it in app.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Header from './Header'
  
  function HeroSlider(props) {
      const [show, setShow] = useState(false);
      const modalShow = () =&gt; setShow(true);
      const openIsAccount = () =&gt; {
  
      }
      return (
  
   &lt;div className=&quot;jumbotron&quot; id=&quot;jumbotron2&quot; &gt;
  &lt;button type=&quot;button&quot; className=&quot;btn btn-primary&quot; id=&quot;shoutBtn&quot; onClick={modalShow}&gt;&lt;span&gt;Get Started&lt;/span&gt;
  &lt;/button&gt;
   &lt;/div&gt;
      );
  }
  
  export default HeroSlider;
  </code></pre>
  <p>Here is the Modal.js</p>
  <pre><code>const IsAccountOpen = (props) =&gt; {
      const [show, setShow] = useState(false);
      const handleClose = () =&gt; setShow(false);
      const handleShow = () =&gt; setShow(true);
  
      return (
          &lt;&gt;
              &lt;Modal show={props.show} onHide={handleClose} backdrop=&quot;static&quot; keyboard={false}&gt;
                  &lt;Modal.Header closeButton&gt;
                      &lt;Modal.Title&gt;Modal title&lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
                  &lt;Modal.Body&gt;
                      I will not close 
                   &lt;/Modal.Body&gt;
              &lt;/Modal&gt;
          &lt;/&gt;
      );
  
  };
  
  export default IsAccountOpen
  </code></pre>