Défi : Afficher des Collections de Données
Tâche : Afficher une liste de produits
Traiter les données obtenues du backend et garantir leur affichage correct sous forme de liste.
La tâche consiste à :
- Utiliser la méthode
map()pour afficher un tableau de produits. - Veiller à compléter les éléments suivants :
h2doit contenir le nom du produit (propriéténame) ;pdoit contenir la description du produit (propriétédescription) ;spandoit contenir la chaîne "Price:" et le prix du produit (propriétéprice).
- Utiliser la méthode
map()pour parcourir le tableauprops.goods. - Veiller à définir la prop
keyde l’élément<li>avec une valeur unique, telle que la propriété id de l’item. - À l’intérieur de chaque élément
<li>, utiliser les éléments suivants :- Un élément
<h2>pour afficher le nom du produit. Accéder au nom depuis leitemcourant ; - Un élément
<p>pour afficher la description du produit. Accéder à la description depuis leitemcourant ; - Un élément
<span>pour afficher la chaîne "Price:" suivie du prix du produit. Accéder au prix depuis leitemcourant.
- Un élément
Tout était clair ?
Merci pour vos commentaires !
Section 2. Chapitre 7
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Génial!
Completion taux amélioré à 4
Défi : Afficher des Collections de Données
Glissez pour afficher le menu
Tâche : Afficher une liste de produits
Traiter les données obtenues du backend et garantir leur affichage correct sous forme de liste.
La tâche consiste à :
- Utiliser la méthode
map()pour afficher un tableau de produits. - Veiller à compléter les éléments suivants :
h2doit contenir le nom du produit (propriéténame) ;pdoit contenir la description du produit (propriétédescription) ;spandoit contenir la chaîne "Price:" et le prix du produit (propriétéprice).
- Utiliser la méthode
map()pour parcourir le tableauprops.goods. - Veiller à définir la prop
keyde l’élément<li>avec une valeur unique, telle que la propriété id de l’item. - À l’intérieur de chaque élément
<li>, utiliser les éléments suivants :- Un élément
<h2>pour afficher le nom du produit. Accéder au nom depuis leitemcourant ; - Un élément
<p>pour afficher la description du produit. Accéder à la description depuis leitemcourant ; - Un élément
<span>pour afficher la chaîne "Price:" suivie du prix du produit. Accéder au prix depuis leitemcourant.
- Un élément
Tout était clair ?
Merci pour vos commentaires !
Section 2. Chapitre 7