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 ! 😇