Itérez sur votre contenu
En code, vous serez très souvent confronté à des listes de données qui présentent la même structure. Bonne nouvelle ! ✨ Pas besoin de vous faire des crampes à force de copier-coller : vous pouvez directement itérer sur votre contenu et générer des composants React dessus.
Mais concrètement, qu'est-ce que ça donne ?
Découvrez votre allié : map()
La méthode JavaScript map()
passe sur chaque élément d'un tableau. Elle lui applique une fonction, et renvoie un nouveau tableau contenant les résultats de cette fonction appliquée sur chaque élément.
Par exemple, pour une fonction qui doublerait la valeur d'un élément, cela donne :
const numbers = [1, 2, 3, 4]
const doubles = numbers.map(x => x * 2) // [2, 4, 6, 8]
Dans notre cas, elle va nous permettre de prendre une liste de données, et de la transformer en liste de composants.
On va donc créer un composant ShoppingList.js
pour notre magasin de plantes.
Dans ce fichier, on déclare une variable plantList qui contient notre liste de plantes :
const plantList = [
'monstera',
'ficus lyrata',
'pothos argenté',
'yucca',
'palmier'
]
Et on ajoute en dessous le composant lui-même :
function ShoppingList() {
return (
<ul>
{plantList.map((plant) => (
<li>{plant}</li>
))}
</ul>
)
}
export default ShoppingList
Vous voyez : pour chaque entrée du tableau, on retourne un élément <li>
.
On importe ShoppingList.js dans <App />
: super ! On a notre liste de composants ! 🎉
Mais qu'est-ce que c'est que cette erreur rouge dans ma console ?
Oh oh ! Il semblerait que j'aie oublié la prop key
🙈.
Précisez votre key
Déjà, une question se pose : qu'est-ce que la prop key
, et pourquoi elle vient nous embêter ici ?
La documentation de React est claire sur ce sujet : les key
(clés) aident React à identifier quels éléments d’une liste ont changé, ont été ajoutés ou supprimés. Vous devez donner une clé à chaque élément dans un tableau, afin d’apporter aux éléments une identité stable.
Je peux donc donner n'importe quelle valeur à ma prop key
?
Pas du tout !
Si vous voulez éviter les bugs, une key
doit impérativement respecter deux principes :
Elle doit être unique au sein du tableau.
Et stable dans le temps (pour la même donnée source, on aura toujours la même valeur de
key=
).
Souvenez-vous, je vous avais parlé du DOM virtuel dans la partie précédente. Eh bien, la key
permet d'associer une donnée au composant correspondant dans le DOM virtuel qui permettra ensuite de générer les composants.
Nous avons plusieurs méthodes pour générer une key
unique :
La méthode la plus simple et la plus fiable consiste à utiliser l'id associée à votre donnée dans votre base de données.
Vous pouvez également trouver un moyen d'exploiter la valeur de la donnée, si vous avez la certitude qu'elle sera toujours unique, et stable dans le temps.
En dernier recours, vous pouvez définir une string et la combiner avec l'index de la data dans votre tableau.
Dans notre cas, puisqu'il n'y a pas d'id associée, on peut faire une combinaison entre l'index et le nom de la plante qui est une string :
function ShoppingList() {
return (
<ul>
{plantList.map((plant, index) => (
<li key={`${plant}-${index}`}>{ plant }</li>
))}
</ul>
)
}
export default ShoppingList
Cette fois-ci, pas d’erreur dans la console !
Exercez-vous
Sur la branche P2C3-Begin-1 , vous trouverez la base de code nécessaire pour commencer l'exercice. Vous verrez dans ShoppingList.js
une liste de plantes importée depuis /datas
qui s'appelle plantList
, et qui comporte des catégories pour chacune des plantes.
À partir de cette liste de plantes, vous devrez :
Constituer une nouvelle liste de manière dynamique qui extrait les catégories uniques de plantes (que nous utiliserons également plus tard).
Il existe plusieurs solutions pour créer une liste d'éléments uniques, mais je vous conseille de vous pencher sur la méthode
reduce()
ou bienforEach()
.Afficher la liste des catégories de plantes au-dessus de la liste des plantes à vendre.
Dans la même logique, la solution se trouve sur la branche P2C3-Solution-1.
Contextualisez le contenu de vos composants
React nous permet de faire des listes de composants : un gain de temps énorme dans votre vie de développeur. Mais ce n'est pas tout ! Le JSX nous permet également d'afficher des éléments de manière conditionnelle dans nos composants.
Vous vous souvenez, dans la première partie, je vous avais dit que React permet d'évaluer directement une expression JavaScript dans le JSX ? Que les accolades permettent d'écrire un ternaire directement pour afficher un élément ou un autre ?
Eh bien, nous allons pousser cette logique plus loin pour changer certaines parties de notre composant selon le contexte.
Créez des conditions dans le JSX
Donc… Nous avons déjà vu le ternaire. Maintenant qu'on a une app complète pour nous faire la main, moi, ça me donne envie de le mettre en application dans notre site de plantes. 🤓
Dans notre liste de plantes plantList.js
, je vais rajouter une catégorie isBestSale
correspondant à un booléen
qui nous indique si notre plante fait partie des meilleures ventes. Ce qui nous donne pour le premier élément :
{
name: 'monstera',
category: 'classique',
id: '1ed',
isBestSale: true
},
Maintenant que nous avons notre booléen, nous allons utiliser un ternaire pour afficher un emoji en fonction. Dans ShoppingList.js
, au niveau de l'affichage du nom, je rajoute :
{plantList.map((plant) => (
<li key={ plant.id }>
{plant.isBestSale ? <span>🔥</span> : <span>👎</span>}
</li>
))}
Ce qui nous donne :
Génial ! Ça marche bien !
Mais en y repensant, je ne suis pas sûre que ce soit top comme argument de vente... 🤔 À la place, n'affichons que le 🔥 pour les meilleures ventes, et rien pour les autres.
Pour ça, on peut retourner null
dans la condition où on ne veut rien afficher :
{plant.isBestSale ? <span>🔥</span> : null}
Et voilà ! On a ce qu’on voulait ! 🙌
Mais vous savez quoi ? Il existe une manière encore plus simple d'écrire ça : vous pouvez utiliser &&
.
Indiquée entre accolades, &&
précède un élément JSX et précise que l'élément ne sera généré que si la condition est respectée. On peut donc écrire :
{plant.isBestSale && <span>🔥</span>}
Yeeees ! Ça fonctionne comme prévu !
Ouvrez-vous à d'autres méthodes
React est particulièrement flexible : il existe d'autres méthodes permettant de contextualiser votre contenu. Je vais vous en montrer quelques-unes dans le screencast ci-dessous :
Exercez-vous
Comme pour le premier exercice, vous trouverez la base de code sur la branche P2C3-Begin-2. J'en ai profité pour rajouter un peu de CSS dans ShoppingList.css
, afin qu'on y voie un peu plus clair. ✨
J'ai également ajouté une variable isSpecialOffer
à true
pour les plantes qui sont en promotion. Votre mission est d'afficher un élément div
qui contient le mot “Soldes” si la plante est en promotion. Vous pouvez lui passer la classe lmj-sales
pour lui ajouter du style.
Vous êtes libre de choisir l’une des méthodes vues dans le chapitre pour créer votre affichage conditionnel.
Et la solution se trouve sur la branche P2C3-Solution-2.
En résumé
À partir d’une liste de données,
map()
permet de créer une liste de composants React.La prop
key
est indispensable dans les listes de composants.Si vous voulez éviter les bugs, la prop
key
doit :être unique au sein de la liste ;
perdurer dans le temps.
La best practice pour créer une
key
est d’utiliser l’id
unique associée à une donnée, et de ne pas vous contenter d'utiliser l'index de l'élément dans la liste.Une condition ternaire permet d’afficher un élément ou un autre dans le JSX, répondant à la condition "if… else...".
Il existe d'autres manières de créer des conditions en React, notamment en sortant les conditions du JSX.
Dans ce chapitre, vous avez appris à maîtriser deux principes extrêmement utiles pour gagner en temps et en rapidité sur React, avec les conditions et les listes ! Félicitations à vous ! 🎉
Dans le prochain chapitre, nous allons aborder un élément essentiel pour la réutilisation des composants en React : les props !
Alors, hâte de vous atteler aux props
? Rendez-vous dans le prochain chapitre ! 🔥