From 56da38540c497e4337ddbb83e9c30029a18862ae Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Wed, 10 Jan 2024 15:02:55 +0100
Subject: [PATCH] =?UTF-8?q?la=20propri=C3=A9t=C3=A9=20children?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                        | 1 +
 src/components/personListing.jsx | 7 ++++---
 src/scripts/main.js              | 9 ++++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 798a158..ac41043 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ où `tag` peut prendre comme valeur :
 * `v3` : utilisation des propriétés  
   voir `/src/components/person.jsx`, `/src/components/personListing.jsx` et son utilisation dans `/src/mains.js`
 * `v3.1` : utilisation  de la syntaxe de pattern matching sur les objets pour destructurer l'objet `props` dans le paramètre du constructeur du composant.
+* `v3.2` : la propriété `children`  
 
 Faire ```git checkout main``` pour revenir à la version finale.
 
diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx
index 97dc8df..8761f39 100644
--- a/src/components/personListing.jsx
+++ b/src/components/personListing.jsx
@@ -7,10 +7,11 @@ import Person from './person.jsx';
 * 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
 */
 const PersonListing =
-         ({ persons }) => <div>
+         ({ persons , children }) => <div>
                      Listing :
-                     <Person name={persons[0].name} age={persons[0].age} />
-                     <Person { ...persons[1]} />
+                     <Person { ...persons[0] } />
+                     <Person { ...persons[1] } />
+                     { children }
                   </div>
 
 export default PersonListing;
diff --git a/src/scripts/main.js b/src/scripts/main.js
index bc4e060..50d1780 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -4,12 +4,19 @@ import { createRoot } from 'react-dom/client';
 import personsData from '../data/personsData.js';
 
 // import React component
+import Person from '../components/person.jsx'
 import PersonListing from '../components/personListing.jsx';
 
 const bootstrapReact = () => {
    const root = createRoot(document.getElementById('insertReactHere'));  // parent for created element = "insertion point"
 
-   root.render(<PersonListing persons={ personsData } />);             // use defined imported component
+   const component = <PersonListing persons={personsData}>
+                        <h3>This node and followings are children and then correspond to <code>props.children</code></h3>
+                        <Person name="Someone Else" age={42} />
+                        <Person name="New One" age={1} />
+                     </PersonListing>;
+
+   root.render(component);
 }
 
 
-- 
GitLab