liste de composants sans propriété key

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.
 

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;