title: Re-render React component back to original state
body: <p>I have this component that returns a bunch of li's on a axios get request, users input text and the search is updated..I want React to re-render the component when the searchInput is null, basically back to its original state.</p>
  
  <pre><code>  class App extends Component {
    constructor (props) {
      super(props)
      this.state = {
        searchResults: [], // API Call returns an array of results
        searchInput: '', // Search Term for API Call
              searchImage: [] //base_url, a file_size and a file_path.
      }
    }
  
  
  performSearch = () =&gt; { // Requesting data from API
      axios.get(`${URL}api_key=${API_KEY}&amp;language=en-US&amp;query=${this.state.searchInput}${PARAMS}`)
          .then((res) =&gt; {
              console.log(res.data.results);
              this.setState({ searchResults: res.data.results});
          });
  }
  </code></pre>
  
  <p>This function below is what triggers the rendering </p>
  
  <pre><code>   handleInputChange = () =&gt; {
          this.setState({
              searchInput: this.search.value // User input
          }, () =&gt; {
              if (this.state.searchInput &amp;&amp; this.state.searchInput.length &gt;1 ) {
                  if (this.state.searchInput.length % 2 === 0) { // Request data on user input
                      this.performSearch();
                  } else if (this.state.searchInput &amp;&amp; this.state.searchInput.length === 0 ) {
                      return ({ searchResults: null}) 
                  }
              }
          });
      }
  
  
  
  
  import React from 'react'
  
  const Suggestions = (props) =&gt; {
    const options = props.searchResults.map(r =&gt; (
      &lt;li
        key={r.id} &gt;
        &lt;img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} /&gt;
        &lt;a href='#t' className='rating'&gt;&lt;i className='fas fa-star fa-fw' /&gt;{r.vote_average}&lt;/a&gt;
      &lt;/li&gt;
    ))
    return &lt;ul className='search-results'&gt;{options}&lt;/ul&gt;
  }
  
  export default Suggestions
  </code></pre>
  
  <p>Issue at the moment is that is that if I search something, eg 'game of thrones' it renders the li's, however if I clear it back to an empty string, I still have left over li's...I dont't wanna see anything if the searchInput is null</p>
  
  <p>Edit: performSearch is fires again while clearing searchInput and returns the last two characters which leaves me with left over li's </p>