diff --git a/README.md b/README.md index 60abf0122a0fcb26c0fd8ba428456d377085ac1b..356a1efbb305454fb02ee764d97f1bd2dc342ff4 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ où `tag` peut prendre comme valeur : * `v5.3` : modification et état courant : utilisation d'une fonction en argument de `setOn` pour modifier l'état à partir de la valeur précédente voir `/src/components/star.jsx` (et `/src/components/person.component.jsx`) * `v5.5` : cycle de vie du composant : utilisation du hook `useEffect` pour agir au moment de la création du composant : juste après le premier rendu. - voir `/src/components/personListing.jsx` + voir `/src/components/personListing.component.jsx` ainsi que `/src/components/person.component.jsx` Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/person.component.jsx b/src/components/person.component.jsx index 10ffabc3443c49142df168bf982de5d5dc74b3c6..079ef8f6c651e6f31d82f262dd23cc813047db5a 100644 --- a/src/components/person.component.jsx +++ b/src/components/person.component.jsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; // import stysheet defining style specific to this component import '../assets/style/person.css'; @@ -11,6 +11,12 @@ const Person = ( { name = 'Anonymous', age, started, delay } ) => { const [ currentAge, setCurrentAge ] = useState(age); + useEffect( () => { + if (started) { + setInterval( () => setCurrentAge( previousCurrentAge => previousCurrentAge + 1 ), delay); + } + }, []); + return ( <div className="person">Here is : <div>name : <span>{ name }</span> </div> diff --git a/src/components/personListing.component.jsx b/src/components/personListing.component.jsx index 724d612a4e9c8f43d2e187ad0a3dcdae963ff63c..74b6c0290e9078a8a227f35ddd57f692d1ac533f 100644 --- a/src/components/personListing.component.jsx +++ b/src/components/personListing.component.jsx @@ -16,7 +16,7 @@ const PersonListing = props => { useEffect( () => { console.log('component did mount'); const fetchData = async () => { - const data = await mockFetch('http://source.of.data/persons',1000); + const data = await mockFetch('http://source.of.data/persons'); setPersons( data ); } fetchData();