Comment créer une application de recherche simple avec React

Lors de ma formation React, j’ai eu quelques problèmes à mettre en place une recherche des données dans une API. Je me suis donc mis à parcourir les différentes façon de construire un formulaire de recherche, ce qui va me permettre de mieux comprendre le fonctionnement d’une application de recherche dans React.

Dans ce premier exemple trouvé sur techwithcy.com, une API publique pour les chiens est utilisée afin d’obtenir les données sur les chiens qui correspondent à la requête de recherche de l’utilisateur. Lorsque l’utilisateur saisit une requête de recherche, le ou les chiens correspondant à la requête sont renvoyés et affichés, sinon un message « Aucun résultat » s’affiche. Commençons.

1. Créez tout d’abord une nouvelle app React
   

   npx create-react-app simple-search-app-techwithcy

2. Pour créer cet exemple de formulaire de recherche techwithcy utilise l’API dogs de Api Ninja. J’ai également créé ma clé pour accéder aux données, ce que vous pouvez également faire, c’est gratuit pour faire ce genre de tests, jusqu’à un certain volume. Api Ninja fourni des données réelles pour créer ses démos. Très utile. Pour en savoir plus visitez https://api-ninjas.com/
3. Rendez-vous ensuite dans le fichier App.js et créez la méthode pour accéder aux données:
   

   const SearchAPI = (name) =>
       fetch(`https://api.api-ninjas.com/v1/dogs?name=${name}`,{ 
       headers: { 'X-Api-Key': 'xxxxx' } }) // Replace the `xxxxx` with your API key
   .then(res => res.json()) 
   .then(data => data)

   Comme cet exemple est sur mon compte github, ma clé API est dans un fichier .env
4. Importez useState

   import React, { useState } from "react";

   Et déclarez deux propriétés d’état et des setters à l’aide du crochet useState dans le composant App, puis donnez-leur les valeurs par défaut de chaîne vide ‘ ‘, et vide []
   

   const [searchQuery, setSearchQuery] = useState('');
   const [searchResult, setSearchResult] = useState([]);

   useState est un crochet (hook) dans React qui permet de gérer l’état d’un composant fonctionnel. Il permet de créer et de mettre à jour des variables d’état pour rendre votre composant réactif aux changements.
5. Créez ensuite une méthode onChange et donnez-lui un argument ‘event’. Affichez le résultat dans la console pour vérifier que tout se passe bien.
   

   const onSearchQueryChange = (event)=>{
       console.log(event.target.value) 
   }

6. Créez un champ HTML input et donnez-lui les attributs comme ci-dessous:
   

    <input type="search" name="searchQuery" onChange={onSearchQueryChange} placeholder="Search by name" aria-label="Search" /> 

   Testez ensuite si le champ de recherche retourne bien ce qui est saisit dans la console.
7. Implémentez la méthode searchAPI créée à l’étape 3 pour obtenir les données des chiens qui correspondent à une certaine requête de recherche. Invoquez la méthode et utilisez la pour résoudre la Promise lorsque les données seront disponibles puisqu’il s’agit d’une opération asynchrone. Ensuite, utilisez le setter – setSearchResult pour définir les données renvoyées sur la propriété d’état – searchResult. A tester avec le mot clé “Golden” par exemple et voir si le résultat s’affiche dans le champ de recherche
   

   const onSearchQueryChange = (event) => {
       e.preventDefault();
       setSearchQuery(e.target.value); // Fetch search data based on query`
       SearchAPI(searchQuery)
       .then((data) => { // Set data to result`
           setSearchResult(data);
           console.log(data, searchResult) 
       })
       .catch((e) => { 
           console.log("error:", e) 
       });
   };

8. Affichez ensuite la valeur de searchResult sous le champ de saisie. Pour ce faire, j’utilise la méthode map pour parcourir le résultat de searchResult , puis j’affiche le nom et l’image du chien.

   { searchResult.map(dog => ( 
       <div> 
           <img src={dog.image_link} alt="dog" />
           <h5>{dog.name}</h5> 
       </div> 
   ))}

   Encore une fois, testez l’application en saisissant un texte de requête, par exemple Bohemian Shepherd. Vous devriez voir les données du chien renvoyées par l’API affichées à l’écran.
9. Ajoutez les conditions pour gérer les requêtes de recherche non valides et pour effacer l’écran de recherche si searchQuery ou searchResult est vide.

   if (event.target.value === "" || data?.length === 0) { 
       return setSearchResult([]); 
   }

10. Ajoutez une condition ternaire pour afficher les données du chien si elles sont disponibles, sinon affichez le message « Aucun résultat ».
    

    {searchResult.length > 0 ? ( searchResult.map((dog) => ( 
        <div> 
            <img src={dog.image_link} alt="dog" /> 
            <h5>{dog.name} </h5>
        </div> 
        )) 
    ) : ( 
        <h5> Aucun résultat </h5>
    )}

Voici la première version d’une application de recherche simple.

Repo github : https://github.com/didiergrand/simple-search-app-techwithcy

Je vais continuer mes recherches et dans mon prochain article concernant le sujet je traiterai du debounce (anti-rebond) notre entrée afin que notre recherche ne s’exécute qu’après un nombre défini de millisecondes et non à chaque changement de caractère.

Restez connecté !