title: ReactJs Class Popup Rendering
body: <p>I wanted to create a react class based popup screen for search purpose but the search popup does not appear even though the console is showing toggle status of a particular check variable</p>
  <pre><code>var InvoiceId;
  var DocumentId;
  var CustomerNumber;
  var BusinessYear;
  class AdvanceSearchPop extends Component {
      constructor(props){
          super(props);
          this.state={
              showModal:false
          };
      }
      setShowModal
  
      isShowModel = (status) =&gt; {
          this.handleClose();
          this.setState({ showModal : status });
      }
  
      handleClose = () =&gt; {
          this.props.onPopupClose(false);
      }
      togglePopupsearch=() =&gt;{
          //this.props.setState.bind(!this.state.showModal);
          
          this.state.showModal = !this.state.showModal;
          //this.props.state.showModalPopup=this.state.showModal;
          console.log(this.state.showModal);
          //isSearch = !isSearch;
          //console.log(isSearchApp);
  }
  setDocumentId=(newValue) =&gt;{
      DocumentId=newValue;
      console.log(DocumentId);
  }
  setCustomerNumber=(newValue) =&gt;{
      CustomerNumber=newValue;
      console.log(CustomerNumber);
  }
  setInvoiceId=(newValue) =&gt;{
      InvoiceId=newValue;
      console.log(InvoiceId);
  }
  setBYear=(newValue)=&gt;{
      BusinessYear=newValue;
      console.log(BusinessYear);
  }
  searchRow=()=&gt;{
      axios.post(`http://localhost:8081/jdbc/search`,{
          &quot;invoice_id&quot;: InvoiceId,
          &quot;doc_id&quot;: DocumentId,
          &quot;cust_number&quot;:CustomerNumber,
          &quot;buisness_year&quot;:BusinessYear
          }
      )  
        .then(res =&gt; {  
          console.log(res);  
          console.log(res.data); 
          //const tableData = this.state.tabeData.filter(item =&gt; item.id !== id);  
          //this.setState({ tableData });     
  
          
        })
  }
      render(){
          return (
               &lt;div className='advancesearch'&gt;
                   &lt;button onClick={this.togglePopupsearch} type=&quot;submit&quot;&gt;Advanced Search&lt;/button&gt;
                   {this.state.showModal &amp;&amp; &lt;Popupsearch
                      content={&lt;div&gt;
                          &lt;div className=&quot;addbtn5&quot;&gt;
                              &lt;input type=&quot;text&quot; placeholder=&quot;Document Id&quot; onChange={(newValue)=&gt;{
                                  this.setDocumentId(newValue);
                              }}/&gt;
                              &lt;input type=&quot;text&quot; placeholder = &quot; Customer Number&quot;  onChange={(newValue)=&gt;{
                                      this.setCustomerNumber(newValue);
                              }}/&gt;
                          
                          &lt;/div&gt;
                          &lt;div className=&quot;addbtn6&quot;&gt;
                              &lt;input type=&quot;text&quot; placeholder = &quot;Invoice Id&quot; onChange={(newValue)=&gt;{
                                      this.setInvoiceId(newValue);
                              }}/&gt;
                          &lt;/div&gt;
                          &lt;div className = &quot;ml&quot;&gt;
                              &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
                                          &lt;DatePicker
                                          views={['year']}
                                          label=&quot;Business Year&quot;
                                          value={this.value}
                                          onChange={(newValue) =&gt; {
                                              this.setBYear(newValue);
                                          }}
                                          renderInput={(params) =&gt; &lt;TextField {...params} helperText={null} /&gt;}
                                          /&gt;
                              &lt;/LocalizationProvider&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;newbutton&quot;&gt;
                              &lt;Button onClick={this.searchRow}&gt;&lt;/Button&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;button&quot;&gt;
                              &lt;Button onClick={this.togglePopupsearch} type=&quot;submit&quot;&gt;Cancel&lt;/Button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      }
                      handleClose={this.togglePopupsearch}
                   /&gt;}
              &lt;/div&gt;
          )
      }
  }
  
  export default AdvanceSearchPop;
  </code></pre>
  <p>and my App.js file is as follows</p>
  <pre><code>import { AdvanceSearchNew } from './AdvanceSearchNew';
  
      class App extends React.Component {  
          constructor() {  
              super();  
              this.state = {  
                showModalPopup: false  
              }  
              var isSearch = require('./FirstComponents')
              console.log(isSearch);
                }
                isShowPopup = (status) =&gt; {  
                  this.setState({ showModalPopup: status });  
                };  
                render(){
        return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;div className = &quot;header&quot;&gt;
                  &lt;div className=&quot;containerLeft&quot;&gt;
                      &lt;img src={require(&quot;./Group.svg&quot;)}  alt=&quot;&quot;/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;containerLeft&quot;&gt;
                      &lt;img src={require(&quot;./logo.svg&quot;)}  alt=&quot;&quot;/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;panel&quot;&gt;
                  &lt;div className=&quot;panelParts&quot;&gt;
                      &lt;div className=&quot;left&quot;&gt;
                          
                              &lt;button type=&quot;submit&quot;&gt;Predict&lt;/button&gt;
                          
                      &lt;/div&gt;
                      &lt;div className=&quot;middle&quot;&gt;
                          
                              &lt;button type=&quot;submit&quot;&gt;Analytics View&lt;/button&gt;
                          
                      &lt;/div&gt;
                
                      &lt;div className=&quot;right&quot;&gt;
                     
              &lt;Fragment&gt;  
              &lt;header align=&quot;center&quot;&gt;  
                &lt;Fragment&gt;  
                  &lt;div  
                    className=&quot;nav-item&quot;  
                    onClick={() =&gt; this.isShowPopup(true)}&gt;  
                  &lt;/div&gt;  
                &lt;/Fragment&gt;  
              &lt;/header&gt;  
                      &lt;AdvanceSearchPop  
                showModalPopup={this.state.showModalPopup}  
                onPopupClose={this.isShowPopup}  
              &gt;&lt;/AdvanceSearchPop&gt;
                           
            &lt;/Fragment&gt;  
                      &lt;/div&gt;
                
                
                      &lt;div className=&quot;searchBox&quot;&gt;
                          &lt;form method=&quot;get&quot; action=&quot;/page2&quot;&gt;
                              &lt;input type=&quot;text&quot; placeholder = &quot;Search Customer Id&quot;/&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;left&quot;&gt;
                          &lt;Add/&gt;
                          
                      &lt;/div&gt;
                      &lt;div className=&quot;middle&quot;&gt;
                          
                          &lt;Edit/&gt;
                          
                      &lt;/div&gt;
                      &lt;div className=&quot;right&quot;&gt;
                          &lt;Delete/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;middle&quot;&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;FirstComponents/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
              &lt;/div&gt;
          &lt;/div&gt;
      );
        }
      }
      export default App;
  </code></pre>
  <p>I tried but could not figure out why the popup screen won't appear even though the console.log statement works fine and prints true and false whenever the concerned button of AdvancedSearchPop is pressed.</p>