diff --git a/README.md b/README.md index d1514f1aa6e36ac37976279f5fda09a4f9206651..d9736c8c59c1848f2e04c1d20d162fe7f83685ec 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,9 @@ où `tag` peut prendre comme valeur : voir `/src/components/person_class.jsx`, `/src/components/personListing_class.jsx` et son utilisation dans `/src/mains.js` * `v4.5` : définitions locales et valeurs par défaut voir `/src/components/person.jsx` et son utilisation dans `/src/mains.js` - +* `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 + Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx index 064b1276eb56beb0ad301b93cb505b2ca9086544..be0ae3d47a8900b018eacfa4a5be8b163446317a 100644 --- a/src/components/personListing.jsx +++ b/src/components/personListing.jsx @@ -4,14 +4,14 @@ import Person from './person.jsx'; /* * props.persons is an Array, here we assume with at least two elements -* note, in second use of Person, the use of spread operator "..." on object to alleviate the syntax, possible when object field names correspond to props name +* Here a list of components is built, but no "key" property is provided => /!\ pb, see console */ -const PersonListing = ({ persons , children }) => - (<div> - Person listing : - <Person { ...persons[0] } /> - <Person { ...persons[1] } /> - { children } - </div>); - +const PersonListing = ({ persons , children }) => { + const personComponents = persons.map(person => <Person {...person} />); + return ( + <div> + {personComponents} + </div> + ); + } export default PersonListing;