4. Afficher le champ de recherche

Nous aimerions afficher notre champ de recherche au-dessus de la liste de tous les pokémons, comme ceci :

Pour cela, rien de plus simple, il suffit d’ajouter le composant PokemonSearch dans le template du composant pokemon-list.tsx, à la ligne 12 :

// Les autres importations.
import PokemonSearch from '../components/pokemon-search';

const PokemonList: FunctionComponent = () => {
  // ...

  return (
    <div>
      <h1 className="center">Pokédex</h1>
      <div className="container"> 
        <div className="row">
          <PokemonSearch />
          {pokemons.map(pokemon => (
            <PokemonCard key={pokemon.id} pokemon={pokemon}/>
          ))}
        </div>
      </div>
      ...
    </div> 
  );
}

export default PokemonList;

Lancez l’application à nouveau, vous serez redirigé vers la liste des pokémons. Entrez du texte dans le nouveau champ de recherche qui est apparu. Vous devriez voir le système d’auto-complétion à l’œuvre !

Pas mal, non ? Et on peut encore améliorer l’application ! 😇