la propriété children

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.
 

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;

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);
 }