From 3608a0db726af7338fa460ea2f850c1736338a28 Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Wed, 10 Jan 2024 14:51:07 +0100
Subject: [PATCH] props et pattern matching

---
 README.md                        | 3 ++-
 src/components/person.jsx        | 6 +++---
 src/components/personListing.jsx | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 3e9890d..798a158 100644
--- a/README.md
+++ b/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.
 
diff --git a/src/components/person.jsx b/src/components/person.jsx
index fe29ea4..f15bfc7 100644
--- a/src/components/person.jsx
+++ b/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;
diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx
index 4730fde..97dc8df 100644
--- a/src/components/personListing.jsx
+++ b/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;
-- 
GitLab