From 2ebc0f7660ecfcdd4726289013f109ba62045271 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Thu, 11 Jan 2024 14:14:25 +0100
Subject: [PATCH] =?UTF-8?q?liste=20de=20composants=20sans=20propri=C3=A9t?=
=?UTF-8?q?=C3=A9=20key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 5 ++++-
src/components/personListing.jsx | 18 +++++++++---------
2 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/README.md b/README.md
index d1514f1..d9736c8 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 064b127..be0ae3d 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;
--
GitLab