title: React.js: How do you implement search functionality?
body: <p>I managed to fetch data from <strong>API</strong>. Now  I want to get a specific data from search input without click.I guess I need here <strong>filter function</strong>. I managed to listen to input from clicking. But how to get data?
  Any help will be appreciated. <br>
  Here is my code</p>
  <pre><code>
  import React, { useState, useEffect } from &quot;react&quot;;
  import CountryListCard from &quot;./CountryListCard&quot;;
  
  import &quot;./CountryList.scss&quot;;
  
  export default function CountryList() {
    const [data, setData] = useState([]);
    const [search, setSearch] = useState(&quot;&quot;);
  
    const fetchData = () =&gt; {
      fetch(&quot;https://restcountries.eu/rest/v2/all&quot;)
        .then((res) =&gt; res.json())
        .then((result) =&gt; setData(result))
        .catch((err) =&gt; console.log(&quot;error&quot;));
    };
  
    useEffect(() =&gt; {
      fetchData();
    }, []);
  
    function handleChange(e) {
      console.log(e.target.value);
    }
      return (
        &lt;div&gt;
          &lt;input
            className=&quot;input&quot;
            type=&quot;text&quot;
            placeholder=&quot;search country ...&quot;
            value={search}
            onChange={handleChange}
          /&gt;
          {data &amp;&amp;
            data.map((country) =&gt; (
              &lt;div className=&quot;CountryList&quot; key={country.name}&gt;
                &lt;div className=&quot;CountryListImg&quot;&gt;
                  &lt;img src={country.flag} alt=&quot;&quot; width=&quot;80px&quot; /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;countryName&quot;&gt;{country.name}&lt;/div&gt;
                &lt;div className=&quot;population&quot;&gt;{country.population}&lt;/div&gt;
                &lt;div className=&quot;region&quot;&gt;{country.region}&lt;/div&gt;
                &lt;div&gt;
                  {country.languages.map((language, languageIndex) =&gt; (
                    &lt;div key={languageIndex}&gt;{language.name}&lt;/div&gt;
                  ))}
                &lt;/div&gt;
              &lt;/div&gt;
            ))}
        &lt;/div&gt;
      );
    }
  
  
  
  
  </code></pre>