title: Filter search results in React
body: <p>So I make an axios request to a backend service. I got the data back, rendered it on the page and filtered it by text search but now, what I want to do now is to hide the search results and only render the search results when a user types in the input field. I dont know how to go about it.
  This is my code so far</p>
  <pre><code>
  
  const HealthFacilities = () =&gt; {
    const [entityType] = useState('HealthFacility')
    const [ehxFacilities, setEhxFacilities] = useState([])
    const [keyStroke, setKeyStroke] = useState()
    const [filteredEhxFacilities, setFilteredEhxFacilities] = useState([])
    const [loading, setLoading] = useState(false)
    const [search, setSearch] = useState('')
    const [currentPage, setCurrentPage] = useState(1)
    const [dataPerPage] = useState(globalConfig.paginationLimit)
  
    const onFetchHandler = async () =&gt; {
      setLoading(true)
      await axios
        .get(
          `${globalConfig.apiServicesUrl}ehx-healthcare-facilities/?filter[limit]=100`,
          {
            headers: {
              Authorization: `Bearer ${globalConfig.bearerTokenValue}`,
            },
          }
        )
        .then(response =&gt; {
          setFilteredEhxFacilities(Array.from(response.data))
          setEhxFacilities(Array.from(response.data))
          setLoading(false)
        })
        .catch(error =&gt; console.log(error))
    }
  
    useEffect(() =&gt; {
      const filteredFacility = ehxFacilities.filter(ehxFacility =&gt; {
        return (
          ehxFacility.healthcareFacilityName
            ?.toLowerCase()
            .includes(search.toLowerCase()) ||
          ehxFacility.city?.toLowerCase().includes(search.toLowerCase()) ||
          ehxFacility.description?.toLowerCase().includes(search.toLowerCase()) ||
          ehxFacility.address1?.toLowerCase().includes(search.toLowerCase())
        )
      })
  
      setFilteredEhxFacilities(filteredFacility)
    }, [search])
  
    useEffect(() =&gt; {
      onFetchHandler()
    }, [])
  
    const indexOfLastData = currentPage * dataPerPage
    const indexOfFirstData = indexOfLastData - dataPerPage
    const currentData = filteredEhxFacilities.slice(
      indexOfFirstData,
      indexOfLastData
    )
  
    const paginate = pageNumber =&gt; setCurrentPage(pageNumber)
  
    const onChangeHandler = e =&gt; {
      e.preventDefault()
      setSearch(e.target.value)
      console.log(e.target.value.length)
    }
  
    return (
      &lt;&gt;
        &lt;Container lg={'fluid'}&gt;
          &lt;Row&gt;
            &lt;Col xs={8} md={10}&gt;
              &lt;Form&gt;
                &lt;Form.Group&gt;
                  &lt;Form.Control
                    type=&quot;text&quot;
                    name=&quot;search&quot;
                    value={search}
                    onChange={onChangeHandler}
                    placeholder=&quot;Search Facilities&quot;
                  /&gt;
                &lt;/Form.Group&gt;
              &lt;/Form&gt;
            &lt;/Col&gt;
            &lt;Col xs={4} md={2}&gt;
              &lt;Link
                to={{
                  pathname: '/manage-healthcare-facility',
                  search: `?id=0&amp;entityType=${entityType}`,
                }}
              &gt;
                &lt;Button variant=&quot;success&quot; size=&quot;md&quot;&gt;
                  &lt;FaPlus /&gt; New
                &lt;/Button&gt;
              &lt;/Link&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;Table responsive=&quot;sm&quot; striped hover bordered&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th scope=&quot;col&quot;&gt;Facility Name&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;City&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;Address&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;Description&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;FindEhxHealthCareFacility
                facilities={currentData}
                loading={loading}
                colNums={4}
              /&gt;
            &lt;/tbody&gt;
          &lt;/Table&gt;
        &lt;/Container&gt;
      &lt;/&gt;
    )
  }
  
  export default HealthFacilities
  
  </code></pre>