title: Make a search filter with react and typescript
body: <ol>
  <li>Hi I would really like some help on how to make a search filter. I wanna be able to type in some text in the input field so the ul list filter with the same letters.</li>
  </ol>
  <pre><code>interface ICrypto {
    id: string;
    name: string;
  }
  
  const defaultProps:ICrypto[] = [];
  
  const Dashboard: React.FC = () =&gt; {
    const [crypto, setCryptos]: [ICrypto[], (posts: ICrypto[]) =&gt; void] = React.useState(defaultProps);
    const [search, setSearch]: [string, (search: string) =&gt; void] = React.useState(&quot;&quot;);
  
    const handleChange = (e: { target: { value: string; }; }) =&gt; {
      setSearch(e.target.value);
    };
  
    const filteredCoins = crypto.filter(crypto =&gt;
      crypto.name.toLowerCase().includes(search.toLowerCase())
    );
  
    return (
      &lt;div className=&quot;App&quot;&gt;
       &lt;ul className=&quot;posts&quot;&gt;
         &lt;input type=&quot;text&quot;&gt;&lt;/input&gt;
           {crypto.map((crypto) =&gt; (
             &lt;li key={crypto.id}&gt;
              &lt;h3&gt;{crypto.id}&lt;/h3&gt;
                &lt;p&gt;{crypto.current_price}&lt;/p&gt;
                &lt;p&gt;{crypto.symbol}&lt;/p&gt;
                  &lt;img src={crypto.image} alt=&quot;image&quot; /&gt;
             &lt;/li&gt;
           ))}
       &lt;/ul&gt;
    {error &amp;&amp; &lt;p className=&quot;error&quot;&gt;{error}&lt;/p&gt;}
  &lt;/div&gt;
    )
  }
  </code></pre>