Utilisation de la méthode find() dans React

par

Utilisation de la méthode find() en React #

Pour utiliser la méthode find() dans React :

  1. Appeler find() sur un tableau.
  2. A chaque itération, vérifier si l’élément correspond à une condition.
  3. Rendu du résultat.
const App = () => {
  const employees = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Carl'},
  ];

  const found = employees.find(element => {
    return element.id === 2;
  });

  console.log(found); 

  return (
    <div>
      <div>{found && <h2>{found.name}</h2>}</div>
    </div>
  );
};

export default App;

La fonction que nous avons passée à la fonction
trouver
est appelée pour chaque élément du tableau.

Si la fonction de rappel renvoie une valeur véridique, la méthode court-circuite et renvoie l’élément correspondant du tableau.

Si la fonction callback ne retourne jamais une valeur vraie, la méthode find() retourne
undefined.

Dans la fonction de l’exemple, nous vérifions si la fonction id de l’objet est
égale à 2 et renvoie le résultat.

const found = employees.find(element => {
  return element.id === 2;
});

console.log(found);

Si la condition n’est jamais satisfaite, le find() retourne undefineddonc
nous devons vérifier avant d’essayer d’accéder à une propriété de l’objet.

<div>
  <div>{found && <h2>{found.name}</h2>}</div>
</div>

Nous avons utilisé la méthode
ET logique (&&amp 😉
avant d’accéder à l’objet name sur l’objet, car si la propriété
found stocke un undefined nous obtiendrions une erreur d’exécution.

L’opérateur logique AND (&&amp 😉 renvoie la valeur de droite si la valeur de gauche est vraie.

Si la found stocke un undefined l’opérateur renvoie
undefined.

Nous pouvons utiliser cette approche car
les booléens, null et undefined sont ignorés.
Ils ne sont tout simplement pas rendus.

Les expressions JSX suivantes ne donnent rien.

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Laisser un commentaire