props et pattern matching

README.md

@@ -32,6 +32,7 @@ où `tag` peut prendre comme valeur :
   voir `/src/components/first.jsx`, `/src/components/second.jsx` et son utilisation dans `/src/mains.js`
 * `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.
+
 Faire ```git checkout main``` pour revenir à la version finale.
 

src/components/person.jsx

@@ -8,9 +8,9 @@ import '../style/person.css';
 * reminder : in jsx, code inside {} is javascript interpreted code
 */
 const Person =
-        props => <div className="person">Here is :
-                   <div>name : <span>{ props.name }</span> </div>
-                   <div>age  : <span>{ props.age }</span> </div>
+        ( { name, age } ) => <div className="person">Here is :
+                   <div>name : <span>{ name }</span> </div>
+                   <div>age  : <span>{ age }</span> </div>
                  </div>
 
 export default Person;

src/components/personListing.jsx

@@ -7,10 +7,10 @@ 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 =
-         props => <div>
+         ({ persons }) => <div>
                      Listing :
-                     <Person name={props.persons[0].name} age={props.persons[0].age} />
-                     <Person {...props.persons[1]} />
+                     <Person name={persons[0].name} age={persons[0].age} />
+                     <Person { ...persons[1]} />
                   </div>
 
 export default PersonListing;