Scribd
Importer
4 vues1 page

Utilisation de map() en React pour les listes

Le document explique l'utilisation de la méthode map() pour appliquer une fonction à chaque élément d'un tableau en JavaScript. Il illustre également l'importance de la propriété 'key' dans React pour identifier de manière unique les éléments d'une liste. Des exemples de syntaxe sont fournis pour illustrer ces concepts.

Transféré par

mambou.wallace2005
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd
4 vues1 page

Utilisation de map() en React pour les listes

Le document explique l'utilisation de la méthode map() pour appliquer une fonction à chaque élément d'un tableau en JavaScript. Il illustre également l'importance de la propriété 'key' dans React pour identifier de manière unique les éléments d'une liste. Des exemples de syntaxe sont fournis pour illustrer ces concepts.

Transféré par

mambou.wallace2005
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd

En realiter,map() est une proprietes qui a chaque element d'un tableau , se saisis

d'une fonction et applique cette fonction a chaque element du tableau.

Sa syntaxe est la suivantes :

const couleurs = [ 'bleu', 'blanc', 'vert'];


return(
<ul>
{ [Link]((couleur) => (
<li>{couleur}<li>
);};
</ul>
NB : la variable declarer par defaut 'couleur' est juste un machin pour pouvoir
represener chaque element du tableau et appliquer cela a chaque fonction.

Remarque : Le props 'Key' aide react a identifier quels elements d'une liste ont
changes, on été ajouter ou supprimer. Il faut donner une cle a chaque element du
tableau afin d'apporter au element une identiter stables.
Sa syntaxe est la suivante :

<ul>
{[Link]((plant, index) => (
<li key={`${plant}-${index}`}>{ plant }</li>
))}
</ul>

Vous aimerez peut-être aussi