diff --git a/README.md b/README.md index 798a158cae828f0dfbb21347c3cdf01c67cb0a96..ac410438de906656b3897d7dacdbe97d5b7c824e 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 97dc8dfab11bb8ee1c488b51a8a1448506a28472..8761f390288fb015059e76fd430db2a19943109e 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 bc4e060c4d9614def0f9955b1f8c772ae5abd0a4..50d1780ff458a5362f0253a9b7c08198c5b0527e 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); }