Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Rendre une Collection de Données | Introduction aux Fondamentaux de React
Maîtrise de React

bookDéfi : Rendre une Collection de Données

Tâche : Afficher une liste de produits

Gérons les données obtenues du backend et assurons-nous de leur rendu correct sous forme de liste.

La tâche est :

  • Utiliser la méthode map() pour rendre un tableau de produits.
  • Assurez-vous de combler les lacunes nécessaires :
    1. h2 doit contenir le nom du produit (propriété name);
    2. p doit contenir la description du produit (propriété description);
    3. span doit contenir la chaîne "Prix :" et le prix du produit (propriété price).
  1. Utilisez la méthode map() pour parcourir le tableau props.goods.
  2. Assurez-vous de définir la propriété key de l'élément <li> sur une valeur unique, telle que la propriété id de l'élément.
  3. À l'intérieur de chaque élément <li>, utilisez les éléments suivants :
    • Un élément <h2> pour afficher le nom du produit. Accédez au nom à partir de l'item actuel ;
    • Un élément <p> pour afficher la description du produit. Accédez à la description à partir de l'item actuel ;
    • Un élément <span> pour afficher la chaîne "Prix :" suivie du prix du produit. Accédez au prix à partir de l'item actuel.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 15

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.17

bookDéfi : Rendre une Collection de Données

Glissez pour afficher le menu

Tâche : Afficher une liste de produits

Gérons les données obtenues du backend et assurons-nous de leur rendu correct sous forme de liste.

La tâche est :

  • Utiliser la méthode map() pour rendre un tableau de produits.
  • Assurez-vous de combler les lacunes nécessaires :
    1. h2 doit contenir le nom du produit (propriété name);
    2. p doit contenir la description du produit (propriété description);
    3. span doit contenir la chaîne "Prix :" et le prix du produit (propriété price).
  1. Utilisez la méthode map() pour parcourir le tableau props.goods.
  2. Assurez-vous de définir la propriété key de l'élément <li> sur une valeur unique, telle que la propriété id de l'élément.
  3. À l'intérieur de chaque élément <li>, utilisez les éléments suivants :
    • Un élément <h2> pour afficher le nom du produit. Accédez au nom à partir de l'item actuel ;
    • Un élément <p> pour afficher la description du produit. Accédez à la description à partir de l'item actuel ;
    • Un élément <span> pour afficher la chaîne "Prix :" suivie du prix du produit. Accédez au prix à partir de l'item actuel.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 15
some-alt