title: How to close Modal in Reactjs?
body: <p>On button click i was trying to open a model (and modal opening too) and in a same modal it contain a button and on button click i was trying to open another  model (and second modal opening too), but when  second modal is opening i want first model to be closed. can it be possible?</p>
  
  <p>Here is my sandbox demo <a href="https://codesandbox.io/embed/dreamy-herschel-cyetn?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/dreamy-herschel-cyetn?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  
  <pre><code>const Practice = () =&gt; {
      const [modalShow, setModalShow] = useState(false);
      const handleSubmit = event =&gt; {
          setModalShow(true);
      };
      return (
          &lt;div&gt;
              &lt;Button onSubmit={handleSubmit} type="submit"&gt;
                  Submit
              &lt;/Button&gt;
              &lt;Modals show={modalShow} onhide={() =&gt; setModalShow(false)} /&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>
  
  <p>here is my modal part</p>
  
  <pre><code>const Modals = ({ show, onhide }) =&gt; {
      const [modalShowsec, setModalShowsec] = useState(false);
  
      const Validation = () =&gt; {
          setModalShowsec(true);
      };
  
      return (
          &lt;div&gt;
              &lt;Modal show={show} onHide={onhide} size="sm" aria-labelledby="contained-modal-title-vcenter" centered&gt;
                  &lt;Modal.Header closeButton&gt;
                      &lt;Modal.Title id="contained-modal-title-vcenter"&gt;HELLO&lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
                  &lt;Modal.Body&gt;
                      &lt;p&gt;Hi&lt;/p&gt;
                  &lt;/Modal.Body&gt;
              &lt;/Modal&gt;
              &lt;button onClick={Validation}&gt; Validate &lt;/button&gt;
              &lt;Modal show={modalShowsec} onHide={() =&gt; setModalShowsec(false)}&gt;
                  &lt;Modal.Header closeButton /&gt;
                  &lt;Modal.Body&gt;
                      &lt;p&gt;Hi cool&lt;/p&gt;
                  &lt;/Modal.Body&gt;
              &lt;/Modal&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>