Utiliser map en Next.js pour des Listes

L'Équipe Alphorm
L'Équipe Alphorm 13e lecture en min

Dans notre article précédent, nous avons exploré les interactions des icônes en Next.js, démontrant comment gérer efficacement les composants visuels. Aujourd’hui, nous allons nous concentrer sur une autre fonctionnalité cruciale : l’utilisation de la méthode map Next.js. Essentielle pour gérer les listes de données, map Next.js offre une solution puissante pour afficher des objets, conditionner des résultats et rendre des éléments uniques. Dans cet article, nous explorerons diverses techniques pour optimiser l’utilisation de map en Next.js, illustrées par des exemples concrets et des visuels pertinents. Vous découvrirez comment améliorer la performance et la clarté de vos applications grâce à des pratiques optimales de gestion de données.

Utiliser map en Next.js pour Afficher des Données

Dans l’article  précédent, nous avons mis en œuvre la méthode map Next.js pour afficher une liste d’icônes d’objets dans notre application. À présent, nous allons approfondir cette méthode en abordant un sujet crucial pour les entreprises telles que la gestion des clients. Il devient nécessaire d’afficher les données des clients dans notre application pour diverses raisons spécifiques.

Le sujet principal de cette partie est donc l’utilisation continue de la méthode map. Sans plus tarder, créons maintenant la liste des objets clients en utilisant le hook useState, ce qui nous permettra de les manipuler efficacement à l’aide de notre fameuse méthode map.

Pour procéder, veuillez ouvrir le fichier app/page.js et supprimer les codes relatifs aux icônes .Voici le reste de notre code à intégrer dans ce fichier

				
					'use client'
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

Et cela nous donne la page sans icone comme ceci :

Image montrant la page Next.js après suppression des icônes, illustrant l'utilisation de map

Ensuite, nous allons mettre en œuvre notre nouveau concept pour créer la liste des objets clients et utiliser la méthode map Next.js par la suite. Voici comment cela pourrait être réalisé : app/page.js

				
					'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [clients,setClients] = useState([
{nom:"Durant",prenom:"Paul",ville:"Marseille"},
{nom:"Jean",prenom:"Marcel",ville:"Paris"},
{nom:"Marie",prenom:"Michelle",ville:"Toulouse"}
])
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p>Lorem ipsum.</p>
<ul>
{
clients.map((client)=>(
<li>{client.nom},{client.prenom},{client.ville}</li>
))
}
</ul>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

Comme modifications dans ce fichier, on a ajouté ce morceau de code :

				
					const [clients,setClients] = useState([
{nom:"Durant",prenom:"Paul",ville:"Marseille"},
{nom:"Jean",prenom:"Marcel",ville:"Paris"},
{nom:"Marie",prenom:"Michelle",ville:"Toulouse"}
])
				
			

Pour déclarer une variable d’état clients et la fonction setClients en utilisant useState dans Next.js, nous passons une valeur initiale pour l’état clients. Cette valeur est un tableau contenant plusieurs objets JavaScript. Chaque objet représente un client avec trois propriétés : nom, prenom, et ville.

Ensuite, pour afficher les clients comme une liste dans notre application, nous devons les mapper. Vous pouvez constater cela dans l’extrait de code ci-dessous utilisant map Next.js :

				
					<ul>
{
clients.map((client)=>(
<li>{client.nom},{client.prenom},{client.ville}</li>
))
}
</ul>
				
			

Comme vous pouvez le constater dans ce code, nous utilisons une fonction fléchée suivie d’une paire de parenthèses dans la méthode map Next.js. Cependant, nous avons également la possibilité de remplacer les parenthèses par des accolades. Dans ce cas, nous devons utiliser le mot-clé return pour renvoyer les données mappées. Vous pouvez l’implémenter comme suit :

				
					<ul>
{
clients.map((client)=>{
return(
<li>{client.nom},{client.prenom},{client.ville}</li>
)
}
)
}
</ul>
				
			

En lançant notre application, les clients sont affichés de cette manière dans notre navigateur.

Affichage des clients dans une liste Next.js,

Super, tout fonctionne correctement maintenant, et tous les clients sont affichés. Mais que faire si nous voulons afficher uniquement certains clients selon une condition spécifique ? C’est ce que nous allons explorer dans la prochaine section de notre projet. Nous utiliserons la méthode map Next.js pour filtrer et afficher les clients en fonction de conditions spécifiques.

Conditionner les Résultats de map en Next.js

Nous avons récemment présenté les clients résidant dans les villes de Marseille, Paris et Toulouse. Cependant, envisagez la situation où l’on nous demande uniquement d’afficher les clients qui ne sont pas situés à Paris. Dans ce scénario, nous devons ajouter une condition dans le bloc return pour filtrer les clients habitant dans les autres villes que Paris. Par conséquent, nous allons optimiser notre programme en conséquence. App/page.js

				
					'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [clients,setClients] = useState([
{nom:"Durant",prenom:"Paul",ville:"Marseille"},
{nom:"Jean",prenom:"Marcel",ville:"Paris"},
{nom:"Marie",prenom:"Michelle",ville:"Toulouse"}
])
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p>Liste des clients qui ne sont pas à Paris</p>
<ul>
{
clients.map((client)=>{
return(
(client.ville !== "Paris")?
<li>{client.nom},{client.prenom},{client.ville}</li>
:""
)
}
)
}
</ul>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

Voici, nous avons mis en place notre condition ternaire comme vous le maîtrisez déjà dans cet extrait de code :

				
					<ul>
{
clients.map((client)=>{
return(
(client.ville !== "Paris")?
<li>{client.nom},{client.prenom},{client.ville}</li>
:""
)
}
)
}
</ul>
				
			

Cependant, vous avez également la possibilité d’utiliser l’autre méthode de cette manière :

				
					<ul>
{
clients.map((client)=>
(
(client.ville !== "Paris")?
<li>{client.nom},{client.prenom},{client.ville}</li>
:""
)
)
}
</ul>
				
			

Ces deux méthodes d’écriture produisent le même rendu visuel. Si nous lançons notre projet, le résultat affiché serait le suivant :

Liste de clients excluant ceux de Paris, rendue avec map en Next.js

Plongez dans l’univers fascinant de Next.js et devenez un expert en 2024 grâce à notre formation vidéo exclusive sur Alphorm : Formation Next.js

Rendre les Éléments Uniques avec key en Next.js

La nécessité de rendre les items uniques est cruciale dans de nombreux contextes, qu’il s’agisse de la gestion des données, de la conception de produits ou de la garantie de l’authenticité. Cette démarche vise à éliminer les doublons ou les répliques, assurant ainsi l’intégrité et la fiabilité des informations ou des objets concernés.

Cependant, dans cette situation spécifique, notre objectif est de rendre uniques les éléments de nos données clients. Vous pourriez vous demander comment procéder ? Eh bien, c’est à la fois simple et extrêmement important dans le domaine de la gestion des données. Pour illustrer cela concrètement, nous avons inclus l’index dans la méthode map Next.js, et cet index servira désormais de clé unique pour chaque donnée client.

Je vous invite à lancer votre application et à inspecter la page, puis à vérifier la console. Vous remarquerez probablement un avertissement similaire à celui-ci :

Avertissement d'éléments uniques manquants

Eh bien, le warning que nous rencontrons indique que chaque enfant (donnée) doit être associé à une clé unique. C’est en effet le principal sujet abordé dans cette section. Afin de remédier à ce problème, examinons d’abord notre code précédent dans le fichier app/page.js, en particulier cet extrait :

Correction des avertissements d'éléments uniques avec key dans map en Next.js
				
					<ul>
{
clients.map((client)=>
(
(client.ville !== "Paris")?
<li>{client.nom},{client.prenom},{client.ville}</li>
:""
)
)
}
</ul>
				
			

Dans cette méthode map Next.js, nous itérons simplement sur chaque client sans spécifier d’index, ce qui provoque le warning. Pour corriger cela, ajoutons maintenant l’index pour chaque client et ce extrait de code devient comme ceci :

				
					<ul>
{
clients.map((client,index)=>
(
(client.ville !== "Paris")?
<li key={index}>
{client.nom},{client.prenom},{client.ville}
</li>
:""
)
)
}
</ul>
				
			

Excellent, nous avons inclus l’index dans la méthode map Next.js, et cet index servira désormais de clé unique pour chaque donnée (client).

En lançant l’application et en inspectant la page simultanément, vous pouvez constater que le warning a été corrigé, comme vous pouvez le vérifier maintenant.

Correction des avertissements d'éléments uniques avec key dans map en Next.js

Ensuite, nous pouvons également afficher l’index de chaque donnée (client) dans notre application. Voyons comment procéder maintenant, toujours dans le même fichier app/page.js.

				
					<ul>
{
clients.map((client,index)=>
(
(client.ville !== "Paris")?
<li key={index}>
{client.nom},{client.prenom},{client.ville} ,{index}
</li>
:""
)
)
}
</ul>
				
			

Comme vous pouvez constater, on a juste ajouté l’index dans la balise <li> et il s’affichera après.

Cela nous donne un visuels comme ceci dans note navigateur :

 

Affichage des index des clients dans une liste Next.js,

Comme vous pouvez le constater, actuellement, seuls les index 0 et 2 sont affichés, car l’index 1 ne respecte pas notre condition (qui stipule que la ville est Paris), donc il n’est pas autorisé à être affiché.

Absolument ! Désormais, nous pouvons pleinement profiter de la méthode map Next.js en utilisant l’index des données pour supprimer un élément grâce à son index, par exemple. Nous aborderons cette fonctionnalité dans la partie suivante.

Pour aller plus loin et maîtriser pleinement les compétences abordées dans cet article, nous vous invitons à découvrir les formations d’Alphorm. Formations Alphorm.

Supprimer un Élément avec son Index en Next.js

Dans la section précédente, nous avons réussi à rendre les éléments uniques avec succès, et ce concept est très important lors de la manipulation des données pour bien distinguer chacune d’entre elles, car l’index est une clé unique pour chaque donnée. Nous allons donc profiter de cet index dans cette partie pour supprimer un élément. Dans notre cas, nous allons masquer un élément lorsque l’utilisateur clique dessus. Voyons maintenant comment implémenter cela dans notre fichier app/page.js en utilisant la méthode map Next.js.

				
					'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [clients,setClients] = useState([
{nom:"Durant",prenom:"Paul",ville:"Marseille",cacher:false},
{nom:"Jean",prenom:"Marcel",ville:"Paris",cacher:false},
{nom:"Marie",prenom:"Michelle",ville:"Toulouse",cacher:false}
])
let effacer = (index)=>{
let updateCLient = [...clients]
updateCLient[index].cacher = true
setClients(updateCLient)
}
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p>Liste des clients qui ne sont pas à Paris</p>
<ul>
{
clients.map((client,index)=>
(
(client.ville !== "Paris" && client.cacher === false)?
<li key={index} onClick={()=>{effacer(index)}}>
{client.nom},{client.prenom},{client.ville} ,{index}
</li>
:""
)
)
}
</ul>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

Nous avons ajouté une clé cacher qui prend par défaut une valeur false dans notre liste d’objet afin que nous puissions manipuler cette clé dans la fonction effacer comme vous pouvez constater dans cet extrait de code :

				
					const [clients,setClients] = useState([
{nom:"Durant",prenom:"Paul",ville:"Marseille",cacher:false},
{nom:"Jean",prenom:"Marcel",ville:"Paris",cacher:false},
{nom:"Marie",prenom:"Michelle",ville:"Toulouse",cacher:false}
])
				
			

Ensuite, nous avons implémenté la fonction effacer dans laquelle nous avons utilisé le spread operator pour créer une copie du tableau clients. Ensuite, nous avons mis à jour la propriété cacher de l’élément correspondant à l’index spécifié. Et après nous avons mis à jour l’état clients avec la nouvelle copie mise à jour du tableau

Pour illustrer cela, voici l’extrait de code pour cette fonction :

				
					let effacer = (index)=>{
let updateCLient = [...clients]
updateCLient[index].cacher = true
setClients(updateCLient)
}
				
			

En conclusion, nous avons également inclus les conditions à vérifier pour afficher les clients qui ont la valeur false pour l’attribut cacher.

Lançons maintenant notre application pour tester si tout fonctionne bien maintenant :

 

Liste de clients avant suppression d'un élément, utilisant map en Next.js

Nos clients résidant dans des villes différentes de Paris sont correctement affichés. Cliquons sur l’élément pour voir s’il sera effacé. Voici ce qui se passe après avoir cliqué sur l’élément d’index 2.

Liste de clients après suppression d'un élément

On a terminé cette partie avec succès maintenant.

Conclusion

En conclusion, maîtriser l’utilisation de la méthode map dans Next.js peut transformer la manière dont vous gérez et affichez les données dans vos applications. Nous avons vu comment conditionner les résultats, rendre les éléments uniques et même supprimer des éléments spécifiques en utilisant map. Ces techniques non seulement améliorent l’efficacité de vos applications, mais elles optimisent également l’expérience utilisateur. En intégrant ces bonnes pratiques, vous pourrez développer des applications Next.js plus robustes et performantes. N’hésitez pas à appliquer ces méthodes pour tirer le meilleur parti de vos projets. Et par la suite nous allons traiter l’article des formulaires Next.js.

 
 
ÉTIQUETÉ : NextJS
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.