Affichez du contenu dynamique grâce aux listes et aux conditions

Votre site "La maison jungle" prend forme ! Vous avez maintenant un design élégant avec votre bannière et votre panier, et votre projet Vite fonctionne parfaitement en local. Mais imaginez devoir créer manuellement chaque plante de votre catalogue... 

Bonne nouvelle ! React offre des outils pour gérer les listes de données et afficher du contenu de manière conditionnelle. Dans ce chapitre, vous allez découvrir comment créer des interfaces dynamiques et intelligentes.

Créez des listes dynamiques avec vos données

Découvrez votre allié : map()

La méthode JavaScript  map()  transforme chaque élément d'un tableau en appliquant une fonction, puis renvoie un nouveau tableau avec les résultats.

const numbers = [1, 2, 3, 4]
const doubles = numbers.map(x => x * 2) // [2, 4, 6, 8]

 En React,  map()  va nous permettre de transformer une liste de données en liste de composants JSX. Voyons ça en pratique !

Ajoutez un catalogue de plantes à votre projet

Créons un nouveau composant pour afficher notre catalogue de plantes à vendre.

• Dans votre dossier  src/components/, créez un fichier  ShoppingList.jsx  :

const plantList = [
  'monstera',
  'ficus lyrata', 
  'pothos argenté',
  'yucca',
  'palmier'
]

const ShoppingList = () => {
  return (
    <ul>
      {plantList.map((plant, index) => (
        <li key={`${plant}-${index}`}>{plant}</li>
      ))}
    </ul>
  )
}

export default ShoppingList

• Maintenant, importez et utilisez ShoppingList dans votre composant App.jsx :

import Banner from './components/Banner'
import ShoppingList from './components/ShoppingList'

const App = () => {
    return (
        <div>
            <Banner />
            <ShoppingList />
        </div>
    )
}

export default App

Et voilà ! Votre liste de plantes s'affiche automatiquement ! Grâce au rechargement automatique de Vite, vous pouvez voir le résultat dans votre navigateur ! 

Comprenez l'importance de la prop key

Vous avez peut-être remarqué l'attribut  key  dans notre exemple. Cette prop est indispensable quand vous créez des listes en React !

React utilise le DOM virtuel pour optimiser les performances. La key permet d'associer chaque donnée au bon composant dans le DOM virtuel. Sans elle, React pourrait confondre les éléments si la liste change !

Pas du tout ! Si vous voulez éviter les bugs, une  key  doit impérativement respecter deux principes :

1. Elle doit être unique au sein du tableau

2. Elle doit être stable dans le temps (même donnée = même  key  )

Si votre  key  n'est pas unique ou bien change dans le temps, votre DOM virtuel risque de confondre les données entre elles (notamment si un élément venait à être inséré dans la liste, ou bien supprimé de la liste).

Pour créer une key, l'idéal c'est d'utiliser l'  id  unique de votre donnée depuis la base de données

À vous de jouer !

À 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.

Affichez du contenu de manière conditionnelle

Maintenant que vous maîtrisez les listes, ajoutons de l'intelligence à votre affichage ! React permet d'afficher différents éléments selon des conditions.

Souvenez-vous :

• React permet d'évaluer directement une expression JavaScript dans le JSX.

• 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.

Enrichissez vos données

Modifions notre liste de plantes pour inclure plus d'informations. Dans  ShoppingList.jsx, remplacez le tableau par celui-ci :

const plantList = [
  {
    name: 'monstera',
    category: 'classique',
    id: '1ed',
    isBestSale: true
  },
  {
    name: 'ficus lyrata',
    category: 'classique', 
    id: '2ab',
    isBestSale: false
  },
  {
    name: 'pothos argenté',
    category: 'classique',
    id: '3sd',
    isBestSale: false
  },
  {
    name: 'yucca',
    category: 'exterieur',
    id: '4kk',
    isBestSale: true
  },
  {
    name: 'palmier',
    category: 'exterieur',
    id: '5pl',
    isBestSale: false
  }
]

Utilisez l'opérateur ternaire pour les conditions

Mettons en valeur nos meilleures ventes avec un emoji 🔥.

Modifiez le rendu dans  ShoppingList.jsx  :

const ShoppingList = () => {
  return (
    <ul>
      {plantList.map((plant) => (
        <li key={plant.id}>
          {plant.isBestSale ? <span>🔥 </span> : <span>👎 </span>}
          {plant.name}
        </li>
      ))}
    </ul>
  )
}

Parfait ! Vos meilleures ventes se distinguent maintenant !

Mais attendez... afficher un pouce vers le bas n'est peut-être pas la meilleure stratégie marketing. Et si on affichait le 🔥 seulement pour les meilleures ventes ?

{plant.isBestSale ? <span>🔥 </span> : null}

Simplifiez avec l'opérateur &&

Il existe une syntaxe encore plus élégante pour afficher quelque chose seulement si une condition est vraie :

{plant.isBestSale && <span>🔥 </span>}

L'opérateur  &&  affiche l'élément JSX seulement si la condition précédente est vraie. Plus concis et plus lisible !

Lancez votre serveur de développement avec  npm run dev  et ouvrez votre navigateur. Vous devriez voir votre catalogue de plantes s'afficher avec les meilleures ventes marquées d'un 🔥 !

N'hésitez pas à modifier les données dans votre fichier, ajouter de nouvelles conditions, ou expérimenter avec les styles. Le rechargement automatique de Vite vous permettra de voir vos changements instantanément !

À vous de jouer !

Ajoutez une nouvelle propriété  isSpecialOffer  à vos plantes et affichez un badge Soldes pour les plantes en promotion.

Conseils :

• Utilisez l'opérateur&&pour l'affichage conditionnel

• Créez une classe CSS.lmj-salespour styliser le badge

• Placez le badge à côté du nom de la plante

En résumé

• On peut créer des listes dynamiques avecmap()pour éviter la répétition de code

• Utiliser la propkeycorrectement permet d'optimiser les performances React

• On peut afficher du contenu conditionnel avec les opérateurs ternaires et&&

Félicitations ! Votre application prend vie avec des données dynamiques ! 

Dans le prochain chapitre, nous allons découvrir les props : le moyen de rendre vos composants réutilisables et flexibles. Plus besoin de dupliquer le code, vous pourrez créer des composants intelligents qui s'adaptent aux données qu'on leur passe ! Prêt à maîtriser les props ? Rendez-vous au chapitre suivant !