Propagation des données

Jusqu'à présent, notre input n'a aucun effet sur nos données.

Nous allons faire fonctionner l'ensemble de l'application et permettre à l'utilisateur qui modifie la valeur, de pouvoir filtrer la liste de ses valeurs.

Pour cela, nous devons permettre à useGetImages("") d'utiliser searchValue présent dans searchFields.

Pour permettre aux composants de pouvoir se passer des données à l'aide de leurs propriétés, nous avons besoin de remonter les données au composant parent.

Commençons par modifier le fichier SearchFields :

• Supprimer l'import de useState

• Ajouter les propriétés {searchValue, setSearchValue} à la fonction SearchFields et supprimer la ligne qui utilise useState, nous n'en aurons plus besoin.

const SearchFields = ({searchValue, setSearchValue}) => {
  return (
    <div className="inputContainer">
      <input
        id="inputCrypto"
        type="text"
        value={searchValue}
        placeholder=" "
        onChange={(e) => setSearchValue(e.target.value)}
      />
      <label htmlFor="inputCrypto">
        <p>Chercher une crypto dans la liste</p>
      </label>
    </div>
  );
};

export default SearchFields;

Modifions également le fichier Crypto.jsx pour qu'il puisse accepter les valeurs mises à jour par SearchFields.jsx.

• Ajoutons une propriété à Crypto pour que notre composant accepte des données qu'il pourra utiliser par la suite.

import useGetImages from "./useGetImages";

const Crypto = ({searchValue}) => {
 const [status, cryptos] = useGetImages(searchValue)
  return (
    <div>
      {status!== "loaded" && <div>Chargement....</div>}
      {status === "loaded" && cryptos.map((crypto) => (
        <div key={crypto.currency_long}>
          <h1>{crypto.currency_long}</h1>
          <h2>{crypto.currency_code}</h2>
        </div>
      ))}
    </div>
  );
};
export default Crypto;

Enfin mettons à jour le fichier App.jsx.

• Importer useState et ajouter la ligne const [searchValue, setSearchValue] = useState("")

• Ajouter les différentes propriétés aux fonctions SearchFields et Crypto

• Relancer l'application et tester de nouveau. Tout devrait fonction normalement à présent.

import { createRoot } from "react-dom/client";
import SearchFields from "./SearchFields";
import Crypto from "./Crypto";
import { useState } from "react";
const App = () => {
  const [searchValue, setSearchValue] = useState("")
  return (
    <div className="container">
      <h1 className="title">Crypto Logos</h1>
      <SearchFields searchValue={searchValue} setSearchValue={setSearchValue}/>
      <Crypto searchValue={searchValue} />
    </div>
  );
};

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);

Parfois, il arrive qu'on ait plusieurs composants imbriqués. Si par exemple, il y en a une dizaine, vous vous rendrez vite compte que passer des composants d'un enfant à un parent est très vite pénible. Pour gérer plusieurs imbrications, au-delà de 5 je dirai, faudrait penser à utiliser useContext.

Accéder au fichier du projet pour cette étape

Sélectionner un fichier