title: React - Search & filter through a data set
body: <p>I have a react application that is fetching data from an express server. The fetch is fine, data is displaying properly, and the search feature is functioning correctly when the user input matches something in the data set. However, if the user then deletes out their input the data set will not return to the previous state and instead the user is forced to make a hard refresh.</p>
  <p>How would I go about fixing this so that when the user deletes input (goes from &quot;james&quot; to &quot;&quot;) the page filters back to all data?</p>
  <pre><code>
  function SearchForm({ data, setData }) {
  
  
    
    /*TRACK USER INPUT INTO SEARCH BOX*/
    const [searchValue, setSearchValue] = useState(&quot;&quot;);
  
    /*FRONT END: FILTER THROUH DATA TO FIND MATCHES TO SEARCH VALUE*/
    const searchVehicles = (data, searchValue) =&gt; {
      const searchedValue = searchValue.toUpperCase();
      const result = data.filter(
        (currenttable) =&gt;
          currenttable.last_name.toUpperCase().includes(searchedValue) ||
          currenttable.first_name.toUpperCase().includes(searchedValue) ||
          currenttable.store.toUpperCase().includes(searchedValue)
      );
  
      if (searchValue) {
        setData(result);
        console.log(result);
      } else {
        setData(data)
      }
    };
  
    /*CALL THE FUNCTION WHEN INPUT IS ENETERED*/
    const handleChange = (event) =&gt; {
      setSearchValue(event.target.value);
      searchVehicles(data, event.target.value);
      console.log(searchValue)
    };
  
    /*RESET THE SEARCH BAR AND RENDER ALL DATA */
    const handleReset = () =&gt; {
      setSearchValue(&quot;&quot;);
    };
  
    /*OUTPUT */
  
    return (
      &lt;form&gt;
        &lt;label htmlFor=&quot;search&quot;&gt;Search: &lt;/label&gt;
        &lt;input
          className=&quot;search-applicant&quot;
          type=&quot;text&quot;
          name=&quot;search&quot;
          placeholder=&quot;Search applicant or store&quot;
          onChange={event =&gt; handleChange(event)}
          value={searchValue}
        &gt;&lt;/input&gt;
        &lt;button className=&quot;search-btn&quot; onClick={handleReset}&gt;
          Refresh
        &lt;/button&gt;
      &lt;/form&gt;
    );
  }
  
  export default SearchForm;
  </code></pre>