React Lists : Affichez Dynamiquement des Données sous Forme de Liste

1. Création de Listes avec la Méthode .map()

La méthode .map() est utilisée pour itérer sur un tableau et générer une nouvelle collection d'éléments JSX. Voici un exemple simple où nous affichons une liste de noms :

📋 Copier le code

function ListeNoms() {
const noms = ['Alice', 'Bob', 'Charlie'];

return (
<ul>
{noms.map((nom, index) => (
<li key={index}>{nom}</li>
))}
</ul>
);
}

ReactDOM.render(<ListeNoms />, document.getElementById('root'));

Explication détaillée :

1. const noms = ['Alice', 'Bob', 'Charlie']; :
   • Cette ligne définit un tableau appelé noms contenant trois éléments : "Alice", "Bob" et "Charlie".
2. {noms.map((nom, index) => (...))} :
   • La méthode .map() est appelée sur le tableau noms.
   • Elle prend une fonction fléchée en argument, qui est exécutée pour chaque élément du tableau.
   • (nom, index) : Pour chaque élément, nom représente la valeur actuelle, et index représente sa position dans le tableau.
3. <li key={index}>{nom}</li> :
   • Chaque élément du tableau est converti en un élément <li>.
   • key={index} : Une clé unique est assignée à chaque élément pour aider React à identifier les changements dans la liste.
4. ReactDOM.render(<ListeNoms />, document.getElementById('root')); :
   • Cette ligne rend le composant ListeNoms dans l'élément HTML ayant l'id root.
   • Le résultat sera une liste non ordonnée (<ul>) contenant trois éléments (<li>).

2. Pourquoi Utiliser une Clé (key) ?

Lorsque vous créez des listes dans React, il est essentiel d'assigner une clé unique à chaque élément. Cela permet à React d'identifier efficacement les éléments lorsqu'ils sont ajoutés, mis à jour ou supprimés, garantissant ainsi des performances optimales.

Voici un exemple plus complexe où nous utilisons des objets pour créer une liste de personnes :

📋 Copier le code

function ListePersonnes() {
const personnes = [
{ id: 1, nom: 'Alice', age: 25 },
{ id: 2, nom: 'Bob', age: 30 },
{ id: 3, nom: 'Charlie', age: 35 }
];

return (
<ul>
{personnes.map(personne => (
<li key={personne.id}>
	{personne.nom} ({personne.age} ans)
</li>
))}
</ul>
);
}

ReactDOM.render(<ListePersonnes />, document.getElementById('root'));

Explication détaillée :

1. const personnes = [...] :
   • Cette ligne définit un tableau d'objets appelé personnes, où chaque objet représente une personne avec un id, un nom et un age.
2. {personnes.map(personne => (...))} :
   • La méthode .map() itère sur le tableau personnes.
   • Pour chaque objet personne, un élément <li> est créé.
3. <li key={personne.id}> :
   • Une clé unique (key={personne.id}) est assignée à chaque élément pour aider React à gérer les mises à jour de manière performante.
4. {personne.nom} ({personne.age} ans) :
   • Les propriétés nom et age de chaque objet sont insérées dynamiquement dans le texte affiché.

3. Exemple Complet : Formulaire avec Ajout de Noms

Imaginons que vous souhaitez créer un formulaire qui permet à l'utilisateur d'ajouter des noms à une liste. Voici comment cela peut être fait :

📋 Copier le code

import React, { useState } from 'react';

function GestionListe() {
const [noms, setNoms] = useState([]);
const [input, setInput] = useState('');

function handleChange(event) {
setInput(event.target.value);
}

function handleSubmit(event) {
event.preventDefault();
if (input.trim() !== '') {
setNoms([...noms, input]);
setInput('');
}
}

return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" value={input} onChange={handleChange} placeholder="Ajoutez un nom..." />
<button type="submit">Ajouter</button>
</form>
<h2>Liste des noms :</h2>
<ul>
{noms.map((nom, index) => (
	<li key={index}>{nom}</li>
))}
</ul>
</div>
);
}

ReactDOM.render(<GestionListe />, document.getElementById('root'));

Explication détaillée :

1. const [noms, setNoms] = useState([]); :
   • Initialise l'état noms comme un tableau vide.
   • setNoms est une fonction pour mettre à jour cet état.
2. const [input, setInput] = useState(''); :
   • Initialise l'état input comme une chaîne vide.
   • setInput met à jour cet état lorsque l'utilisateur saisit du texte.
3. function handleChange(event) :
   • Cette fonction est appelée à chaque modification du champ de saisie.
   • setInput(event.target.value) met à jour l'état input avec la valeur saisie.
4. function handleSubmit(event) :
   • Cette fonction est appelée lors de la soumission du formulaire.
   • event.preventDefault() empêche le comportement par défaut du navigateur (rechargement de la page).
   • setNoms([...noms, input]) ajoute le nouveau nom à la liste existante.
   • setInput('') réinitialise le champ de saisie après l'ajout.
5. {noms.map((nom, index) => (...))} :
   • Itère sur le tableau noms pour générer dynamiquement des éléments <li>.
   • key={index} assigne une clé unique à chaque élément pour optimiser les performances.

4. Meilleures Pratiques pour Travailler avec des Listes

Pour travailler efficacement avec des listes dans React, voici quelques conseils :

• Toujours inclure une clé (key) : Cela aide React à identifier chaque élément de manière unique et à optimiser les mises à jour.
• Utilisez des identifiants uniques comme clés : Si vos données possèdent un ID unique (par exemple, depuis une base de données), utilisez-le plutôt que l'index du tableau.
• Évitez de modifier directement l'état : Utilisez toujours des méthodes comme setState ou les hooks pour mettre à jour l'état de manière immuable.

Conclusion

Vous avez maintenant appris à travailler avec des listes dans React en utilisant la méthode .map() et en comprenant l'importance des clés (key). En combinant ces techniques avec des formulaires interactifs, vous pouvez créer des interfaces utilisateur dynamiques et réactives.

Prochain chapitre : Formulaires React