Nous devons maintenant utiliser notre service de pokémons, afin de récupérer les pokémons correspond au terme de recherche de l’utilisateur. Pour mettre en place ce fonctionnement, nous allons créer un nouveau composant PokemonSearch. Ce composant aura pour rôle d’afficher et de gérer le champ de recherche des pokémons, ainsi que l’auto-complétion :
Le template de ce composant sera simple. Il comprendra un champ de recherche, et une liste de résultats correspondants aux termes de la recherche. Créons donc un nouveau fichier pokemon-search.tsx :
import React, { FunctionComponent, useState } from 'react';
import { Link } from 'react-router-dom';
import Pokemon from '../models/pokemon';
import PokemonService from '../services/pokemon-service';
const PokemonSearch: FunctionComponent = () => {
const [term, setTerm] = useState<string>('');
const [pokemons, setPokemons] = useState<Pokemon[]>([]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
const term = e.target.value;
setTerm(term);
if(term.length <= 1) {
setPokemons([]);
return;
}
PokemonService.searchPokemon(term).then(pokemons => setPokemons(pokemons));
}
return (
<div className="row">
<div className="col s12 m6 offset-m3">
<div className="card">
<div className="card-content">
<div className="input-field">
<input type="text" placeholder="Rechercher un pokémon" value={term} onChange={e => handleInputChange(e)} />
</div>
<div className='collection'>
{pokemons.map((pokemon) => (
<Link key={pokemon.id} to={`/pokemons/${pokemon.id}`} className="collection-item">
{pokemon.name}
</Link>
))}
</div>
</div>
</div>
</div>
</div>
);
}
export default PokemonSearch;
Hormis les balises nécessaires pour les feuilles de style, les lignes de code qui nous intéressent se situent :
Notre composant de recherche est en place est prêt à être utiliser. C’est ce que nous allons faire juste après !