title: blank table in the attempted use
body: <p>part of the problem is that the value entered in the input is exactly what I mean by the returned element, which is &quot;[ ]&quot;
  the expected result was to be input : Name
  output : Name + img etc , there is no error during the output and the returned message in the console is only [] it looks like something was missing in advance thanks for the help :)</p>
  <pre><code>App.js
          &lt;div&gt;
              &lt;Nav /&gt;
              &lt;DataContext&gt;
                  &lt;Switch location={location} key={location.pathname}&gt;
                      {routes.map(({ path, Component }) =&gt; (
                          &lt;Route
                              key={path}
                              exact
                              path={path}
                              component={Component}
                          /&gt;
                      ))}
                  &lt;/Switch&gt;
              &lt;/DataContext&gt;
          &lt;/div&gt;
  
  //Data.js
  
  
  export const DataContext = createContext();
  const url = `https://corona.lmao.ninja/v2/countries`;
  function Data(props) {
      const [state, setState] = useState({ countries: [] });
  
      useEffect(() =&gt; {
          axios.get(url).then((res) =&gt; {
              const countries = res.data;
              setState({ countries });
          });
      }, []);
  
      return (
          &lt;DataContext.Provider value={{ state, setState }}&gt;
              {props.children}
          &lt;/DataContext.Provider&gt;
      );
  }
  export default Data;
  
  Countries.js
  
  
  
  const Div = styled.div`
      padding: 10vh 0 0 0;
  `;
  function Countries() {
      const [find, setFind] = useState(&quot;&quot;);
      const [filteredData, setFilteredData] = useState([]);
      const dataContext = useContext(Data.DataContext);
      const { state } = dataContext;
      const content = state.countries;
  
      useEffect(() =&gt; {
          setFilteredData(
              content.filter((country) =&gt;
                  country.toString().toLowerCase().includes(find)
              )
          );
      }, [find, content]);
  
      return (
          &lt;Div&gt;
              &lt;div&gt;
                  &lt;input
                      type=&quot;text&quot;
                      placeholder=&quot;Search&quot;
                      value={find}
                      onChange={(e) =&gt; setFind(e.target.value)}
                  /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  {filteredData.map((r, i) =&gt; (
                      &lt;div key={i}&gt;
                          &lt;Card style={{ width: &quot;18rem&quot; }}&gt;
                              &lt;Card.Img src={r.countryInfo.flag} variant=&quot;top&quot; /&gt;
                              &lt;Card.Body&gt;
                                  &lt;Card.Title&gt;{r.country}&lt;/Card.Title&gt;
                                  &lt;Link to={`/${r.country}`}&gt;
                                      &lt;Button variant=&quot;primary&quot;&gt;Visit&lt;/Button&gt;
                                  &lt;/Link&gt;
                              &lt;/Card.Body&gt;
                          &lt;/Card&gt;
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
          &lt;/Div&gt;
      );
  }
  
  export default Countries;
  </code></pre>