gestion d'évènement

README.md

@@ -44,6 +44,8 @@ où `tag` peut prendre comme valeur :
 * `v4.6` : génération d'une liste de composants avec gestion de la propriété `key`   
 * `v5` : premier composant à état  
   voir `/src/components/person.jsx` 
+* `v5.1` : gestion d'événements  
+  voir `/src/components/star.jsx` et `onClick`
 
 Faire ```git checkout main``` pour revenir à la version finale.
 

src/components/star.component.jsx

+import { useState } from 'react';
+
+import starOn from '../assets/images/star_on.png';
+import starOff from '../assets/images/star_off.png';
+
+/*
+ define component Star, at first Star is off, click on component light on the star using handleClick
+*/
+const Star = () => {
+   const [ on, setOn ] = useState(false) ;
+
+   /* onClick listener, turn the star on if not yet */
+   const handleClick = event => setOn(true);                          // event is not used here, could be omitted
+
+   return(
+      <img src = { on ? starOn : starOff }
+           onClick = { handleClick }
+      />
+   );
+
+}
+
+export default Star;

src/scripts/main.js

 import { createRoot } from 'react-dom/client';
 
-// import data, simulate data retrieval from database, *personsData* is an Array object
-import personsData from '../data/personsData.js';
-
 // import React component
-import Person from '../components/person.jsx'
-import PersonListing from '../components/personListing.jsx';
+import Star from '../components/star.component.jsx'
 
    const bootstrapReact = () => {
       const root = createRoot(document.getElementById('insertReactHere')); 
 
-      const component = <PersonListing persons={personsData} delay={2000} />
+      const component = <> 
+                           <Star /> <Star />  <Star />
+                        </>
 
       root.render(component);
    }