Hooks - useState

A présent, vu que nous avons installé les librairies dont nous avions besoin pour débuter un projet en react, nous pouvons à présent développer notre application.

Commençons par créer un composant SearchField.jsx qui acceptera des paramètres.

const SearchFields = () => {
  const searchvalue = "Bitcoin"
  return (
    <div className="inputContainer">
      <input
        id="inputCrypto"
        type="text"
        value={searchvalue}
        placeholder=" "
      />
      <label htmlFor="inputCrypto">
        <p>Chercher une crypto dans la liste</p>
      </label>
    </div>
  );
};

export default SearchFields;

Dans le fichier App.jsx, supprimer l'import de Crypto les lignes qui l'utilisent. Ajouter l'import pour SearchField .

import { createRoot } from "react-dom/client";
import SearchFields from "./SearchFields";

const App = () => {
  return (
    <div className="container">
      <h1 className="title">Crypto Logos</h1>
      <SearchFields />
    </div>
  );
};

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

Vous aurez des erreurs dans votre console. Nous les corrigerons dans la suite du cours.

Aller sur la page internet de l'application, http://localhost:5173/. Vous pourrez constater que vous avez à présent un élément input dans lequel est inscrit "Bitcoin".

Essayer de renseigner une valeur, Vous constaterez que vous n'avez pas la possibilité de le modifier.

Pourquoi ? Réfléchissons une minute au fonctionnement de React : lorsque vous commencer à insérer une valeur, React détecte qu'un événement DOM se produit. Lorsque cela se produit, React pense que quelque chose a peut-être changé, il exécute donc un nouveau rendu. Il s'agit d'une opération très rapide. Il différencie ensuite ce qui est actuellement là et ce qui est proposé. Il met ensuite à jour la quantité minimale de DOM nécessaire.

Avez-vous remarqué qu'on utilise className au lieu de class dans les éléments html pour définir le css ? Nous le faisons parce que class est un mot réservé en javascript. Nous ne pouvons donc pas l'utiliser. A la place, les concepteurs de React ont décidé d'utiliser className.

De même que className, htmlFor est utilisé parce que for est un mot réservé.

Donc, si nous tapons, nous n'obtenons que la valeur liée à l'emplacement qui n'est d'autre que "Bitcoin". Et rien n'a changé cela, donc il reste le même. En d'autres termes, la liaison de données bidirectionnelle n'est pas gratuite dans React. Je dis que c'est une fonctionnalité parce qu'elle vous rend explicite sur la façon dont vous gérez vos données. Maintenant, nous allons le faire fonctionner.

import { useState } from "react";
const SearchFields = () => {
  const [searchvalue, setSearchValue] = useState("");
  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;

• La ligne 3 correspond à ce qu'on appelle un hook .

• Cette ligne s'exécute à chaque fois que la fonction de rendu est appelée. Étant donné que les 'Hooks' sont appelés dans le même ordre à chaque fois, ils pointent toujours vers le même élément d'état. Pour cette raison, ils peuvent être avec état : vous pouvez conserver des éléments d'état qui changent à l'aide des "Hooks", puis les modifier ultérieurement à l'aide de leurs fonctions de mise à jour fournies.

• Un concept absolument essentiel que vous devez saisir est que les hooks reposent sur cet ordre strict. En tant que tel, ne mettez pas de hooks à l'intérieur des instructions if ou des boucles. Si vous le faites, vous aurez des erreurs insensées qui impliquent que useState renvoie le mauvais état. Si vous voyez useState renvoyer le mauvais élément d'état, c'est probablement ce que vous l'avez fait.

• Parce que le point précédent est très important, l'équipe React nous a fourni une règle de charpie qui nous aide à ne pas tomber dans ce piège. Cette règle de base repose sur nous, les développeurs, qui est de suivre la convention d'appeler nos hooks useXxxxxx .

• L'argument donné à useState est la valeur par défaut. Dans notre cas, nous pourrions lui donner "Bitcoin" comme valeur par défaut, mais donnons-lui une valeur de chaîne vide par défaut.

• useState nous renvoie un tableau contenant deux éléments : la valeur actuelle de cet état et une fonction pour mettre à jour cet état. Nous utilisons une fonctionnalité de JavaScript appelée déstructuration pour extraire ces deux éléments du tableau.

• Nous avons utilisé la fonction setSearchValue dans l'attribut onChange de "INPUT". Chaque fois que la valeur de l'input est modifiée, elle appellera cette fonction qui appelle setSearchValue avec ce qui a été saisi dans l'input. Lorsque setSearchValue est appelé, React sait que son état a été modifié et lance un nouveau rendu.

• Vous pouvez créer vos propres crochets personnalisés. useState n'est qu'un parmi tant d'autres.

Ajoutons une règle esLint pour gérer les hooks. Dans votre invite de commande exécuter: npm install -D eslint-plugin-react-hooks@4.6.0 et mettez à jour ESlint:

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "rules": {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0
  },
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx"]
      }
    }
  }
}

L'ordre des extensions n'est pas particulièrement important pour nous, sauf Prettier qui doit être à la dernière position. Celui-ci sert à désactiver les règles que les autres activent.

Le composant SearchFields.jsx que nous avons créé, nous permettra, nous permettra de filtrer nos données pour n'afficher que les valeurs correspondantes.

N'oubliez pas de copier également le code CSS.

Accéder au fichier du projet pour cette étape

Sélectionner un fichier