diff --git a/README.md b/README.md index d9736c8c59c1848f2e04c1d20d162fe7f83685ec..6aff103106a4e99e50244a9b0392994512b9bb7d 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,8 @@ où `tag` peut prendre comme valeur : * `v4.6-problem` : génération d'une liste de composants, à l'aide de `map()` voir `/src/components/personListing.jsx` /!\\ mais **cette version pose problème** car il manque la gestion de la propriété `key` : voir dans la console - +* `v4.6` : génération d'une liste de composants avec gestion de la propriété `key` + + Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx index be0ae3d47a8900b018eacfa4a5be8b163446317a..0bba56aa521ce746437d65c9f0791834b9625309 100644 --- a/src/components/personListing.jsx +++ b/src/components/personListing.jsx @@ -7,7 +7,10 @@ import Person from './person.jsx'; * Here a list of components is built, but no "key" property is provided => /!\ pb, see console */ const PersonListing = ({ persons , children }) => { - const personComponents = persons.map(person => <Person {...person} />); + const personComponents = persons.map(person => <Person + {...person} + key={person.id} + />); return ( <div> {personComponents}