Using Hooks, implementing a counter using "useState"

Author: sntwandy

server/db.json

@@ -1,41 +1,5 @@
 {
   "badges": [
-    {
-      "id": "2de30c42-9deb-40fc-a41f-05e62b5939a7",
-      "firstName": "Fredy",
-      "lastName": "Grady",
-      "email": "Leann_Berge@gmail.com",
-      "jobTitle": "Legacy Brand Director",
-      "twitter": "FredaGrady22221-7573",
-      "avatarUrl": "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
-    },
-    {
-      "id": "63c03386-33a2-4512-9ac1-354ad7bec5e9",
-      "firstName": "Daphney",
-      "lastName": "Torphy",
-      "email": "Ron61@hotmail.com",
-      "jobTitle": "National Markets Officer",
-      "twitter": "DaphneyTorphy96105",
-      "avatarUrl": "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
-    },
-    {
-      "id": "a9748581-dfdc-4a78-930d-5205a2ccef48",
-      "firstName": "Tatyana",
-      "lastName": "Von",
-      "email": "Herminio.Schmeler@hotmail.com",
-      "jobTitle": "Central Branding Representative",
-      "twitter": "TatyanaVon35871-3686",
-      "avatarUrl": "https://www.gravatar.com/avatar/98c382edd93414c1649b9db866000f97?d=identicon"
-    },
-    {
-      "id": "1921a734-cc05-4f71-a677-ffe38dda6958",
-      "firstName": "Maude",
-      "lastName": "Effertz",
-      "email": "Dan_Weimann0@yahoo.com",
-      "jobTitle": "Product Solutions Analyst",
-      "twitter": "MaudeEffertz73114",
-      "avatarUrl": "https://www.gravatar.com/avatar/01d0de92ec9ca4fdfbb99edf6a1abfea?d=identicon"
-    },
     {
       "id": "3629db36-14f9-4f24-b139-200f3a1b9af7",
       "firstName": "Breanna",
@@ -99,15 +63,6 @@
       "twitter": "DevinBartell94456-3248",
       "avatarUrl": "https://www.gravatar.com/avatar/714a712dc155ccc6b0d825dbc258ec0d?d=identicon"
     },
-    {
-      "id": "aa98596d-fea6-4686-90e1-93514b6dc011",
-      "firstName": "Antwan",
-      "lastName": "Walker",
-      "email": "Isom.Zboncak@yahoo.com",
-      "jobTitle": "Central Paradigm Executive",
-      "twitter": "AntwanWalker03371-3341",
-      "avatarUrl": "https://www.gravatar.com/avatar/45273652dd6323b8a2378e3208436180?d=identicon"
-    },
     {
       "id": "8758e3df-00a6-424c-8878-ff6106a6f029",
       "firstName": "Kayla",

src/pages/BadgeDetails.js

@@ -11,7 +11,22 @@ import './styles/BadgeDetails.css';
 // Images
 import confLogo from '../images/platziconf-logo.svg';
 
+
+// Custom hooks
+function useIncreaseCount (max) {
+    // Hooks 'useState'
+    const [count , setCount] = React.useState(0);
+
+    if (count > max) {
+        setCount(0);
+    }
+    return [count, setCount];
+}
+
 function BadgeDetails (props) {
+    // const [state, setState] = React.useState();
+    const [count, setCount] = useIncreaseCount(5);
+
     return(
         <React.Fragment>
                 <div className="BadgeDetails-hero">
@@ -41,6 +56,9 @@ function BadgeDetails (props) {
                             <h2>Actions</h2>
                             <div className="BadgeDetailsActions-buttons">
                                 <div className="BadgeDetailsActions-edit">
+                                    <button onClick={ () => {
+                                        setCount(count + 1);
+                                    } } className="mr-4 btn btn-primary">Increase count: {count}</button>
                                     <Link className="btn btn-primary" to={`/badges/${props.badge.id}/edit`}>Edit</Link>
                                 </div>
                                 <div>