Les développeurs rencontrent souvent des difficultés pour afficher efficacement des listes d’objets tout en gérant des conditions complexes dans leurs applications.
Cela peut rendre le code complexe, difficile à maintenir et à déboguer, augmentant le risque d’erreurs et de performances réduites.
Dans cet article, découvrez comment utiliser la méthode map avec des hooks comme useState pour gérer, filtrer et manipuler des données de manière optimale, en améliorant ainsi la lisibilité et la performance de vos applications Next.js.
Utiliser map en Next.js pour Afficher des Données
Créer des icônes dans Next.jsDans 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 :
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.
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 :
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
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 :
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 :
<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.
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 :
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.
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 :
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.
On a terminé cette partie avec succès maintenant.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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.
