title: Modals Using React
body: <p>I have a problem. The addmodal is showing from the advanced search modal button, but I have already defined the advancedsearch modal. If I click the advanced search button, it is hsowing the add modal, if I click the add button , it is also showing the add modal. I want a solution where I can display 2 different modals using 2 different buttons.
  Please Help.</p>
  <p>Main App.js:</p>
  <pre><code>&lt;button onClick={()=&gt; setShow(true)} className=&quot;leftbtns adv-srch-btn&quot;id=&quot;adv-srch-modal&quot;&gt;ADVANCED SEARCH&lt;/button&gt;
    &lt;Advsrchmodal onClose={()=&gt; setShow(false)} show={show}/&gt;
    &lt;button onClick={()=&gt; setShow(true)} className=&quot;rightbtns add-btn&quot; id =&quot;add-odal&quot;&gt;ADD&lt;/button&gt;
    &lt;Add onClose={()=&gt; setShow(false)} show={show}/&gt;
  </code></pre>
  <p>Add Modal.js</p>
  <pre><code>import React from 'react'
  
  const Addmodal= props=&gt; {
  if(!props.show){
    return null
  }
  return (
  &lt;div className='modal overlay' id= 'add-modal '&gt;
    &lt;div className=&quot;modal-content&quot; id= 'add-modal '&gt;
          &lt;div className=&quot;modal-header&quot; id= 'add-modal '&gt;
              &lt;h4 className=&quot;modal-title&quot; id= 'add-modal '&gt;Add&lt;/h4&gt;
          &lt;/div&gt;
          &lt; div className=&quot;modal-body&quot; id= 'add-modal '&gt;
              &lt;input type=&quot;text&quot; placeholder='Document ID' id='doc_id' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Invoice Id' id='invoice_id' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Customer Number' id='cust_number' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Business Year' id='business_year' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Document ID' id='doc_id' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Invoice Id' id='invoice_id' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Customer Number' id='cust_number' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Business Year' id='business_year' className=&quot;modal-input&quot; /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;modal-footer&quot; id= 'add-modal '&gt;
              &lt;button className=&quot;addbtn &quot; id= 'add-modal '&gt;ADD&lt;/button&gt;
              &lt;button className=&quot;cancel&quot; id= 'add-modal ' onClick={props.onClose}&gt;CANCEL&lt;/button&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    )
    }
  
   export default Addmodal
  </code></pre>
  <p>Addvanced Search Modal/js{</p>
  <pre><code>import React from 'react'
  
  const Advsrchmodal = props=&gt; {
  if(!props.show){
      return null
  }
  return (
  &lt;div className='modal overlay' id=&quot;adv-srch-modal&quot; &gt;
      &lt;div className=&quot;modal-content&quot;id=&quot;adv-srch-modal&quot;&gt;
          &lt;div className=&quot;modal-header&quot;id=&quot;adv-srch-modal&quot;&gt;
              &lt;h4 className=&quot;modal-title&quot;id=&quot;adv-srch-modal&quot;&gt; Advance Search&lt;/h4&gt;
          &lt;/div&gt;
          &lt; div className=&quot;modal-body&quot;id=&quot;adv-srch-modal&quot;&gt;
              &lt;input type=&quot;text&quot; placeholder='Document ID' id='doc_id' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Invoice Id' id='invoice_id' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Customer Number' id='cust_number' className=&quot;modal-input&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder='Business Year' id='business_year' className=&quot;modal-input&quot; /&gt;
              
          &lt;/div&gt;
          &lt;div className=&quot;modal-footer&quot;id=&quot;adv-srch-modal&quot;&gt;
              &lt;button className=&quot;advsrchbtn&quot;id=&quot;adv-srch-modal&quot;&gt;SEARCH&lt;/button&gt;
              &lt;button className=&quot;cancel&quot;id=&quot;adv-srch-modal&quot; onClick={props.onClose}&gt;CANCEL&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  )
  }
  
  export default Advsrchmodal
  </code></pre>
  <p>App.css</p>
  <pre><code>        .modal{
    /*display: none;*/
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  .modal-content{
    background-color: #2b404d ;
    width:500px;
    border-radius: 10px;
  }
  .modal-title{
    font-size: 25px;
    display: flex;
    color: white;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 80px;
    justify-content: left;
  }
  .modal-body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 35px;
    margin-right: 10px;
    margin-left: 10px;
  }
  
  .modal-input{
    border-radius: 5px;
    padding: 10px 0;
    border: none;
    justify-content: center;
  }
  .addbtn{
    padding: 5px 110px;
    margin-right: 10px;
    border: 1px solid white;
    justify-content: center;
    background-color: #2b404d;
    color: white;
  }
  .advsrchbtn{
    padding: 5px 95px;
    background-color: #2b404d;
    margin-right: 10px;
    border: 1px solid white;
    color: white;
  }
  .cancel{
    padding: 5px 90px;
    border: 1px solid white;
    background-color: #2b404d;
    color: white;
  }
  .modal-footer{
    margin-top: 20px;
    justify-content: center;
    background-color: #2b404d;
  }
  </code></pre>