composants contrôlés

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.
 

src/components/personListingData.component.jsx

+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>
     );
 }