Skip to content

Commit cc2ddb3

Browse files
committed
Using Hooks, implementing a counter using "useState"
1 parent 719a202 commit cc2ddb3

File tree

2 files changed

+18
-45
lines changed

2 files changed

+18
-45
lines changed

server/db.json

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,5 @@
11
{
22
"badges": [
3-
{
4-
"id": "2de30c42-9deb-40fc-a41f-05e62b5939a7",
5-
"firstName": "Fredy",
6-
"lastName": "Grady",
7-
"email": "Leann_Berge@gmail.com",
8-
"jobTitle": "Legacy Brand Director",
9-
"twitter": "FredaGrady22221-7573",
10-
"avatarUrl": "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
11-
},
12-
{
13-
"id": "63c03386-33a2-4512-9ac1-354ad7bec5e9",
14-
"firstName": "Daphney",
15-
"lastName": "Torphy",
16-
"email": "Ron61@hotmail.com",
17-
"jobTitle": "National Markets Officer",
18-
"twitter": "DaphneyTorphy96105",
19-
"avatarUrl": "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
20-
},
21-
{
22-
"id": "a9748581-dfdc-4a78-930d-5205a2ccef48",
23-
"firstName": "Tatyana",
24-
"lastName": "Von",
25-
"email": "Herminio.Schmeler@hotmail.com",
26-
"jobTitle": "Central Branding Representative",
27-
"twitter": "TatyanaVon35871-3686",
28-
"avatarUrl": "https://www.gravatar.com/avatar/98c382edd93414c1649b9db866000f97?d=identicon"
29-
},
30-
{
31-
"id": "1921a734-cc05-4f71-a677-ffe38dda6958",
32-
"firstName": "Maude",
33-
"lastName": "Effertz",
34-
"email": "Dan_Weimann0@yahoo.com",
35-
"jobTitle": "Product Solutions Analyst",
36-
"twitter": "MaudeEffertz73114",
37-
"avatarUrl": "https://www.gravatar.com/avatar/01d0de92ec9ca4fdfbb99edf6a1abfea?d=identicon"
38-
},
393
{
404
"id": "3629db36-14f9-4f24-b139-200f3a1b9af7",
415
"firstName": "Breanna",
@@ -99,15 +63,6 @@
9963
"twitter": "DevinBartell94456-3248",
10064
"avatarUrl": "https://www.gravatar.com/avatar/714a712dc155ccc6b0d825dbc258ec0d?d=identicon"
10165
},
102-
{
103-
"id": "aa98596d-fea6-4686-90e1-93514b6dc011",
104-
"firstName": "Antwan",
105-
"lastName": "Walker",
106-
"email": "Isom.Zboncak@yahoo.com",
107-
"jobTitle": "Central Paradigm Executive",
108-
"twitter": "AntwanWalker03371-3341",
109-
"avatarUrl": "https://www.gravatar.com/avatar/45273652dd6323b8a2378e3208436180?d=identicon"
110-
},
11166
{
11267
"id": "8758e3df-00a6-424c-8878-ff6106a6f029",
11368
"firstName": "Kayla",

src/pages/BadgeDetails.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,22 @@ import './styles/BadgeDetails.css';
1111
// Images
1212
import confLogo from '../images/platziconf-logo.svg';
1313

14+
15+
// Custom hooks
16+
function useIncreaseCount (max) {
17+
// Hooks 'useState'
18+
const [count , setCount] = React.useState(0);
19+
20+
if (count > max) {
21+
setCount(0);
22+
}
23+
return [count, setCount];
24+
}
25+
1426
function BadgeDetails (props) {
27+
// const [state, setState] = React.useState();
28+
const [count, setCount] = useIncreaseCount(5);
29+
1530
return(
1631
<React.Fragment>
1732
<div className="BadgeDetails-hero">
@@ -41,6 +56,9 @@ function BadgeDetails (props) {
4156
<h2>Actions</h2>
4257
<div className="BadgeDetailsActions-buttons">
4358
<div className="BadgeDetailsActions-edit">
59+
<button onClick={ () => {
60+
setCount(count + 1);
61+
} } className="mr-4 btn btn-primary">Increase count: {count}</button>
4462
<Link className="btn btn-primary" to={`/badges/${props.badge.id}/edit`}>Edit</Link>
4563
</div>
4664
<div>

0 commit comments

Comments
 (0)