title: React: how to clear previous results when there is a new search with no results
body: <p>I would like the previous search results to clear if there are no results with a new search. Currently I have an alert box pop up with a "no results" msg. I would like at the same time to clear the results from previous search. </p>
  
  <p>I tried adding this.setState({contracts:{}}) to empty,in the else statement but because the SearchResults component can no longer read the constracts state it crashes the site. </p>
  
  <p>I also tried changing the display of the SearchResults component to null if there was no results, but that had to effect at all.</p>
  
  <p>is there a way to add the contracts state to componentWillUnmount if there are no results?</p>
  
  <p>Search Results component..</p>
  
  <pre><code>const SearchResults = props =&gt; (
  
    &lt;div&gt;{console.log(props)}
      &lt;div&gt;
         &lt;/div&gt;   
         &lt;div&gt;
      &lt;div className="row" &gt;&lt;h4 style={{margin:"auto", marginBottom:"15px"}}&gt;Search Results&lt;/h4&gt;&lt;/div&gt;
      &lt;table className="table table-striped"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            {props.labels.map(label =&gt; ( &lt;th key={label.Id}&gt;{label.DisplayName}&lt;/th&gt;))}
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
  
  { props.contracts.map((contract, i) =&gt; (
  
      &lt;tr key={i} data-id={contract.Id}  
          onClick={(e) =&gt; {props.handleContract(contract.Fields.filter(field =&gt; field.DataField === "IDXT001").map(field =&gt; field.DataValue))}}
          className="clickable-row"
          target="_blank"
          &gt;
          {contract.Fields.map( docs =&gt;  
          &lt;td key={docs.Id}&gt;&lt;span id={docs.DataField}&gt;{docs.DataValue}&lt;/span&gt;&lt;/td&gt;)}
      &lt;/tr&gt;))}
  
        &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  )
  </code></pre>
  
  <p>Search Form Component..</p>
  
  <pre><code>  class SearchForm extends React.Component {
  
      constructor(...args) {
        super(...args);
  
        this.state = { 
          modalShow: false,
        };
      }
  
      render() {
  
        return ( 
  &lt;form className="form-inline col-md-12" onReset={this.props.handleFormReset}&gt;
  
  {this.props.labels.map(label =&gt; (
    &lt;div className="card border-0 mx-auto" style={styles} key={label.Id}&gt;
         &lt;ul className="list-inline "&gt;
            &lt;span&gt;
              &lt;li&gt;
                &lt;Labels  htmlFor={label.DisplayName} &gt;{label.DisplayName}:&lt;/Labels&gt;
              &lt;/li&gt;
              &lt;li &gt;
                &lt;Input  
                  key={label.Id}
                  onChange={(e) =&gt; {
                    this.props.handleInputChange(label.DataField, e.target.value)}}
                  value={this.props.newFormValues}
                  maxLength="999"
                  style={{height:34}}
                  name="value"
                  type="search" 
                  className={"form-control mb-2 mr-sm-2"} 
                  id={label.DataField}
                /&gt;
              &lt;/li&gt; 
            &lt;/span&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  ))}
  
    &lt;div className=" col-sm-12"&gt;
  
    &lt;Button
          style={{ float: "left", marginBottom: 10 }} 
          className="btn btn-success"
          type="submit"
          onClick={this.props.handleFormSubmit}
        &gt;
          Search
        &lt;/Button&gt;
  
        &lt;Help /&gt;
  
        &lt;Button
          style={{ float: "left", marginBottom: 10 }} 
          className="btn btn-secondary"
          type="reset"
          onClick={this.props.handleFormReset}
        &gt;
          Reset
        &lt;/Button&gt;
  </code></pre>
  
  <p>Parent Component..</p>
  
  <pre><code>  class SearchPage extends React.Component {
      constructor(props) {
        super(props);
  
  
        this.state = {
          labels: [],
          contracts: [],
          formValues:{},
          pdfs:[],
          titles:[],
          show: false,
  
        };
        this.onClick = this.handleContract.bind(this);
        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);
  
      }
  
      initialState = { 
        formValues: {},
      }
  
      componentDidMount(){
        this.loadLabels();
      }
  
  
      handleFormReset = () =&gt; {
        this.setState(() =&gt; this.initialState)
        console.log("value is"+JSON.stringify(this.state.formValues))
  
      }
  
      handleClose() {
        this.setState({ show: false });
      }
  
      handleShow() {
        this.setState({ show: true });
      }
  
      loadLabels = () =&gt; {
        API.getLabels()
          .then(res =&gt; {
            const labels = res.data;
            console.log(labels)
              this.setState({ labels })
          })
          .catch(err =&gt; console.log(err));
      };
  
      handleInputChange = (key, value) =&gt; {
         const newFormValues = Object.assign({}, this.state.formValues, {[key]: value});
       this.setState({ formValues: newFormValues })
      };
  
      handleContract = (id) =&gt; {
        API.openRow(id)
        .then(res =&gt; {
          const pdfs = res.data;
          this.setState({pdfs});
          this.props.history.push({
            state: { labels:this.state.labels,
              pdfs:this.state.pdfs,
              titles:this.state.titles }
          })
        })
        .catch(err =&gt; console.log(err));
        API.titles(id)
        .then(res =&gt; {
          const titles = res.data;
          this.setState({titles});
        })
        this.setState({ show: true });
      }
  
    loadContracts = (query) =&gt; {
      API.search(query)
      .then(res =&gt; {
        const contracts = res.data;
        if (contracts.length &gt; 0 )
        this.setState({ contracts });
        else
           return alert("No results")
        this.handleFormReset();
      })
      .catch(err =&gt; console.log(err));
      };
  
  
      handleFormSubmit = event =&gt; {  
      event.preventDefault();
      const formData = this.state.formValues
      let query = '';
      let keys = Object.keys(formData);
      keys.map(k =&gt; { 
        if (query !== "")
        query += `&amp;`;
        query += `filter=`
        query += `${k}|${formData[k]}`
  
        this.loadContracts(query);
       })
  
      };
    &lt;SearchForm 
      labels={this.state.labels}
      handleFormSubmit={this.handleFormSubmit}
      handleInputChange={this.handleInputChange}
      handleReset={this.handleReset}
      handleFormReset={this.handleFormReset}
      /&gt;
  
      &lt;br/&gt;
    &lt;SearchResults 
      labels={this.state.labels}
      contracts={this.state.contracts} 
      pdfs={this.state.pdfs}
      handleContract={this.onClick}
      handleTitles={this.onClick}
      /&gt;
  </code></pre>