Skip to content
Snippets Groups Projects
Commit 2ebc0f76 authored by Jean-Christophe's avatar Jean-Christophe
Browse files

liste de composants sans propriété key

parent ff720ea1
Branches
Tags v4.6-problem
No related merge requests found
...@@ -38,6 +38,9 @@ où `tag` peut prendre comme valeur : ...@@ -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` 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 * `v4.5` : définitions locales et valeurs par défaut
voir `/src/components/person.jsx` et son utilisation dans `/src/mains.js` 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. Faire ```git checkout main``` pour revenir à la version finale.
...@@ -4,14 +4,14 @@ import Person from './person.jsx'; ...@@ -4,14 +4,14 @@ import Person from './person.jsx';
/* /*
* props.persons is an Array, here we assume with at least two elements * 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 }) => const PersonListing = ({ persons , children }) => {
(<div> const personComponents = persons.map(person => <Person {...person} />);
Person listing : return (
<Person { ...persons[0] } /> <div>
<Person { ...persons[1] } /> {personComponents}
{ children } </div>
</div>); );
}
export default PersonListing; export default PersonListing;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment