React: how to clear previous results when there is a new search with no results

Question

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.

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.

I also tried changing the display of the SearchResults component to null if there was no results, but that had to effect at all.

is there a way to add the contracts state to componentWillUnmount if there are no results?

Search Results component..

const SearchResults = props => (

  <div>{console.log(props)}
    <div>
       </div>   
       <div>
    <div className="row" ><h4 style={{margin:"auto", marginBottom:"15px"}}>Search Results</h4></div>
    <table className="table table-striped">
      <thead>
        <tr>
          {props.labels.map(label => ( <th key={label.Id}>{label.DisplayName}</th>))}
        </tr>
      </thead>
      <tbody>

{ props.contracts.map((contract, i) => (

    <tr key={i} data-id={contract.Id}  
        onClick={(e) => {props.handleContract(contract.Fields.filter(field => field.DataField === "IDXT001").map(field => field.DataValue))}}
        className="clickable-row"
        target="_blank"
        >
        {contract.Fields.map( docs =>  
        <td key={docs.Id}><span id={docs.DataField}>{docs.DataValue}</span></td>)}
    </tr>))}

      </tbody>
    </table>
    </div>
</div>
)

Search Form Component..

  class SearchForm extends React.Component {

    constructor(...args) {
      super(...args);

      this.state = { 
        modalShow: false,
      };
    }

    render() {

      return ( 
<form className="form-inline col-md-12" onReset={this.props.handleFormReset}>

{this.props.labels.map(label => (
  <div className="card border-0 mx-auto" style={styles} key={label.Id}>
       <ul className="list-inline ">
          <span>
            <li>
              <Labels  htmlFor={label.DisplayName} >{label.DisplayName}:</Labels>
            </li>
            <li >
              <Input  
                key={label.Id}
                onChange={(e) => {
                  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}
              />
            </li> 
          </span>
      </ul>
  </div>
))}

  <div className=" col-sm-12">

  <Button
        style={{ float: "left", marginBottom: 10 }} 
        className="btn btn-success"
        type="submit"
        onClick={this.props.handleFormSubmit}
      >
        Search
      </Button>

      <Help />

      <Button
        style={{ float: "left", marginBottom: 10 }} 
        className="btn btn-secondary"
        type="reset"
        onClick={this.props.handleFormReset}
      >
        Reset
      </Button>

Parent Component..

  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 = () => {
      this.setState(() => this.initialState)
      console.log("value is"+JSON.stringify(this.state.formValues))

    }

    handleClose() {
      this.setState({ show: false });
    }

    handleShow() {
      this.setState({ show: true });
    }

    loadLabels = () => {
      API.getLabels()
        .then(res => {
          const labels = res.data;
          console.log(labels)
            this.setState({ labels })
        })
        .catch(err => console.log(err));
    };

    handleInputChange = (key, value) => {
       const newFormValues = Object.assign({}, this.state.formValues, {[key]: value});
     this.setState({ formValues: newFormValues })
    };

    handleContract = (id) => {
      API.openRow(id)
      .then(res => {
        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 => console.log(err));
      API.titles(id)
      .then(res => {
        const titles = res.data;
        this.setState({titles});
      })
      this.setState({ show: true });
    }

  loadContracts = (query) => {
    API.search(query)
    .then(res => {
      const contracts = res.data;
      if (contracts.length > 0 )
      this.setState({ contracts });
      else
         return alert("No results")
      this.handleFormReset();
    })
    .catch(err => console.log(err));
    };


    handleFormSubmit = event => {  
    event.preventDefault();
    const formData = this.state.formValues
    let query = '';
    let keys = Object.keys(formData);
    keys.map(k => { 
      if (query !== "")
      query += `&`;
      query += `filter=`
      query += `${k}|${formData[k]}`

      this.loadContracts(query);
     })

    };
  <SearchForm 
    labels={this.state.labels}
    handleFormSubmit={this.handleFormSubmit}
    handleInputChange={this.handleInputChange}
    handleReset={this.handleReset}
    handleFormReset={this.handleFormReset}
    />

    <br/>
  <SearchResults 
    labels={this.state.labels}
    contracts={this.state.contracts} 
    pdfs={this.state.pdfs}
    handleContract={this.onClick}
    handleTitles={this.onClick}
    />

Answer 1

Assuming the search results is an array of objects, you can set the contracts to empty array instead of setting to empty object should work. this.searchResults = []

Answer 2

Hard to say without seeing your component that is crashing, but setting your contracts to empty array in your else case would probably prevent your component from crashing.

this.setState({contracts:[]})