diff --git a/readme.md b/readme.md
index 7818c521861308e12f89a982150c1bbe6b8e783e..a4415eb4c08e945730e182992cddbd103d3bb433 100644
--- a/readme.md
+++ b/readme.md
@@ -69,6 +69,8 @@ où `tag` peut prendre comme valeur :
    voir `/src/components/app.jsx`, `/src/components/personListingData.jsx`  
 * `v7` : exemple de composant avec des élément *non contrôlés* par *React*  
   voir `/src/components/addPerson.jsx`  
+* `v7.1` : exemple de composant contrôlé   
+  voir `/src/components/personListingData.jsx`  
 
 Faire ```git checkout main``` pour revenir à la version finale.
 
diff --git a/src/components/personListingData.component.jsx b/src/components/personListingData.component.jsx
index 597d77d501d6e9564675e3de4820cd8b253cfbbe..b1b27618ee72b998378148d79e415383c64b40f9 100644
--- a/src/components/personListingData.component.jsx
+++ b/src/components/personListingData.component.jsx
@@ -1,10 +1,14 @@
+import { useState } from 'react';
 
 import '../assets/style/personListingData.css';
 
 import Data from './data.component.jsx';
 
+const INITIAL_MIN_AGE_VALUE = '18';
 const PersonListingData = ( { persons } ) => {
 
+    const [minAge, setMinAge] = useState(INITIAL_MIN_AGE_VALUE);
+
     const nbPersonsOlderThan = minAge => {
         return persons.filter( person => person.age > minAge ).length ;
     }
@@ -13,13 +17,21 @@ const PersonListingData = ( { persons } ) => {
         return persons.map( person => person.age );
     }
 
+    const handleChangeAge = event => {
+        setMinAge( event.target.value );
+    }
+
     return(
         <div className="data">
-          <Data label="nb personnes" value={ persons.length } />
-          <Data label="âge &gt; 18" value={ nbPersonsOlderThan(18) } />
-          <Data label="âge &gt; 50" value={ nbPersonsOlderThan(50) } />
-          <Data label="âge du plus jeune&nbsp;" value={ Math.min(...ageList()) } />
-          <Data label="âge du plus vieux&nbsp;" value={ Math.max(...ageList()) } />
+            <div>âge min : <input type="number" className="ageMin"
+                                  value= { minAge }
+                                  onChange={ handleChangeAge }
+                           />
+            </div>
+            <Data label="nb personnes" value={ persons.length } />
+            <Data label={`âge > ${minAge}`} value={ nbPersonsOlderThan(minAge) } />
+            <Data label="âge du plus jeune&nbsp;" value={ Math.min(...ageList()) } />
+            <Data label="âge du plus vieux&nbsp;" value={ Math.max(...ageList()) } />
         </div>
     );
 }