Transmission des états aux composants enfants dans React

Supposons que nous ayons un tableau de produits :

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

Supposons que ce tableau se trouve dans le composant Products. Enregistrons ces produits dans l'état du composant :

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
}

Maintenant, parcourons les produits avec une boucle et affichons-les dans un rendu quelconque :

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <div key={prod.id}>
      nom : <span>{prod.name}</span>,
      prix : <span>{prod.cost}</span>
    </div>;
  });
  
  return <div>
    {items}
  </div>;
}

Comme vous pouvez le voir, le contenu de notre boucle map est assez complexe, surtout si le rendu du produit devient plus important par la suite. Une telle complexité rend la lecture, la compréhension et la maintenance du code difficiles.

Il serait préférable d'extraire le code responsable de l'affichage du produit dans un composant séparé. Appelons-le Product. Voici le code de notre composant :

jsxfunction Product({ name, cost }) {
  return <div>
    nom : <span>{name}</span>,
    prix : <span>{cost}</span>
  </div>;
}

Utilisons maintenant à l'intérieur du composant Products dans la boucle map des composants enfants Product :

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <Product
      key ={prod.id}
      name={prod.name}
      cost={prod.cost}
    />;
  });
  
  return <div>
    {items}
  </div>;
}

Comme vous pouvez le voir, le code de la boucle est maintenant simplifié et est devenu plus compréhensible. De plus, l'affichage du produit est maintenant géré par un composant séparé, dans lequel nous pouvons créer, puis modifier le rendu des produits.

Techniquement, nous avons ainsi un composant parent qui possède un état avec des données, et des composants enfants qui reçoivent ces données sous forme de props et les affichent de la manière que nous souhaitons.

jsxconst initUsers = [
  {id: id(), name: 'user1', surname: 'surn1', age: 30},
  {id: id(), name: 'user2', surname: 'surn2', age: 31},
  {id: id(), name: 'user3', surname: 'surn3', age: 32},
];