modification et état courant

README.md

@@ -49,7 +49,7 @@ où `tag` peut prendre comme valeur :
 * `v5.2` : modification  et état courant : mise en évidence du problème  
   voir `/src/components/star.jsx`
 * `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`
+  voir `/src/components/star.component.jsx` et `/src/components/person.component.jsx`
 
 Faire ```git checkout main``` pour revenir à la version finale.
 

src/components/person.jsx → src/components/person.component.jsx

 import { useState  } from 'react';
 
 // import stysheet defining style specific to this component
-import '../style/person.css';
+import './assets/style/person.css';
 
 /*
 * define a component that uses props, props is a javascript object
@@ -11,7 +11,7 @@ const Person = ( { name = 'Anonymous' , age , delay } ) => {
    const [ currentAge, setCurrentAge ] = useState(age);
 
    // become older every delay ms
-   setInterval( () => setCurrentAge( currentAge + 1 ), delay);
+   setInterval( () => setCurrentAge( previousCurrentAge => previousCurrentAge + 1 ), delay);
 
    return (
       <div className="person">Here is :

src/components/personListing.jsx → src/components/personListing.component.jsx

 import React from 'react';
 
-import Person from './person.jsx';
+import Person from './person.component.jsx';
 
 /*
 * props.persons is an Array, here we assume with at least two elements

src/components/person_class.jsx

-import React from 'react';
-
-import '../style/person.css';
-
-/*
- * define component as a class that extends React.component
-*/
-export default class Person extends React.Component {
-   constructor(props) {
-      super(props);
-   }
-
-   render() {
-      const { name , age } = this.props;
-
-      const view = <div className="person">Here is :
-         <div>name : <span>{ name }</span> </div>
-         <div>age  : <span>{ age }</span> </div>
-      </div>
-      return view;
-   }
-}