javascript - Crear un filtro de búsqueda con react y typescript

1. Hola, realmente me gustaría recibir ayuda sobre cómo hacer un filtro de búsqueda. Quiero poder escribir un texto en el campo de entrada para que la lista ul se filtre con las mismas letras.

interface ICrypto {
  id: string;
  name: string;
}

const defaultProps:ICrypto[] = [];

const Dashboard: React.FC = () => {
  const [crypto, setCryptos]: [ICrypto[], (posts: ICrypto[]) => void] = React.useState(defaultProps);
  const [search, setSearch]: [string, (search: string) => void] = React.useState("");

  const handleChange = (e: { target: { value: string; }; }) => {
    setSearch(e.target.value);
  };

  const filteredCoins = crypto.filter(crypto =>
    crypto.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="App">
     <ul className="posts">
       <input type="text"></input>
         {crypto.map((crypto) => (
           <li key={crypto.id}>
            <h3>{crypto.id}</h3>
              <p>{crypto.current_price}</p>
              <p>{crypto.symbol}</p>
                <img src={crypto.image} alt="image" />
           </li>
         ))}
     </ul>
  {error && <p className="error">{error}</p>}
</div>
  )
}

Respuesta #1

const Dashboard: React.FC = () => {
  const [crypto, setCryptos]: [ICrypto[], (posts: ICrypto[]) => void] = React.useState(defaultProps);
  const [search, setSearch]: [string, (search: string) => void] = React.useState("");

  const handleChange = (e: { target: { value: string; }; }) => {
    setSearch(e.target.value);
  };

  return (
    <div className="App">
     <ul className="posts">
       <input type="text" onChange={handleChange} />
         {crypto.map((crypto) => {
             if (search == "" || crypto.name.toLowerCase().includes(search.toLowerCase())) {
                 return (
                     <li key={crypto.id}>
                         <h3>{crypto.id}</h3>
                         <p>{crypto.current_price}</p>
                         <p>{crypto.symbol}</p>
                         <img src={crypto.image} alt="image" />
                     </li>
                 );
             }
             return null;
         )}
     </ul>
     {error && <p className="error">{error}</p>}
   </div>
  )
}

Respuesta #2

Entonces, la lógica de filtrado se ve bien, pero lo que te falta es establecer el estado de entrada de búsqueda.

Cambia esta línea

<input type="text"></input>

a esto:

<input type="text" value={search} onChange={(e) => setSearch(e.target.value)}></input>