diff --git a/README.md b/README.md
index 56b653d85a16eb52e43058591e608973fd58ea92..bcd7f7ccfab6b740b271740ee476d64c43cfc6bb 100644
--- a/README.md
+++ b/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.
 
diff --git a/src/assets/images/star_off.png b/src/assets/images/star_off.png
new file mode 100644
index 0000000000000000000000000000000000000000..24677407f3cc08958c93ce1c8bb8417a7aee8c11
Binary files /dev/null and b/src/assets/images/star_off.png differ
diff --git a/src/assets/images/star_on.png b/src/assets/images/star_on.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ff17d16e1621258670791c773285845bfacb221
Binary files /dev/null and b/src/assets/images/star_on.png differ
diff --git a/src/components/star.component.jsx b/src/components/star.component.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..2777c4bbd03620d5c324ff0b8d22a0648c041f25
--- /dev/null
+++ b/src/components/star.component.jsx
@@ -0,0 +1,23 @@
+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;
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 71172216cdc29dd238398b4be77de7f70de3bf5e..b6bdb818a7d343247d5a9d614908ebbdcb5b0d91 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,16 +1,14 @@
 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);
    }