diff --git a/README.md b/README.md
index 3e9890d0984fc594f320ae7813b8da3c15441b60..798a158cae828f0dfbb21347c3cdf01c67cb0a96 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 fe29ea41cd38bc18d461a744a606cb5ca7283d5e..f15bfc7d22ec4b19366fc96128e3907cfc1b495e 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 4730fde35b4463fa0e8c383430e8fb55c6d42f69..97dc8dfab11bb8ee1c488b51a8a1448506a28472 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;