From 402e87adbf1e48b50ca785176470c66fda2b314c Mon Sep 17 00:00:00 2001
From: Jean-Christophe <jean-christophe.routier@univ-lille.fr>
Date: Mon, 29 Jan 2024 09:38:05 +0100
Subject: [PATCH] =?UTF-8?q?composants=20contr=C3=B4l=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 readme.md                                     |  2 ++
 .../personListingData.component.jsx           | 22 ++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/readme.md b/readme.md
index 7818c52..a4415eb 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 597d77d..b1b2761 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>
     );
 }
-- 
GitLab