diff --git a/README.md b/README.md index bf5c1a20db3958486b0b7690b98d8adb2dd62589..a74c0370bcf33267438d5bfc9c4cbe6775557f0a 100644 --- a/README.md +++ b/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. diff --git a/src/style/person.css b/src/assets/style/person.css similarity index 100% rename from src/style/person.css rename to src/assets/style/person.css diff --git a/src/components/person.jsx b/src/components/person.component.jsx similarity index 80% rename from src/components/person.jsx rename to src/components/person.component.jsx index 802477900eb5008a15c5d90af44022dea586f519..98fefc72916afc2cb4f2032275bb04438cbc797a 100644 --- a/src/components/person.jsx +++ b/src/components/person.component.jsx @@ -1,7 +1,7 @@ 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 : diff --git a/src/components/personListing.jsx b/src/components/personListing.component.jsx similarity index 94% rename from src/components/personListing.jsx rename to src/components/personListing.component.jsx index eca5ec7d8cce1dca1645ad09f17e2491815f1f04..4b7e719a5b7c6b50e988fe7da76539ddac2b194e 100644 --- a/src/components/personListing.jsx +++ b/src/components/personListing.component.jsx @@ -1,6 +1,6 @@ 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 diff --git a/src/components/person_class.jsx b/src/components/person_class.jsx deleted file mode 100644 index 4ab55cb8e596768e0c766e595d9ae801509f4549..0000000000000000000000000000000000000000 --- a/src/components/person_class.jsx +++ /dev/null @@ -1,22 +0,0 @@ -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; - } -}