React Increment Decrement Counter

Introduction

In this challenge you will be developing a counter game aka increment decrement counter using React hooks i.e with useState and useEffect in which you can click a button to increase the count value. This you can play with your friends and challenge them to click click click... as much as possible in a given time.

Skills Graph

Counter Game

To get started, open the editor. You can see the following files from your editor.

├── public
├── src
│   ├── components
│   │  └── HomePage
│   │       ├── HomePage.css
│   │       └── HomePage.js
│   ├── App.js
│   ├── index.css
│   └── index.js
├── package-lock.json
└── package.json

Requirements

• To install the project dependencies, use the following command:

  npm i

• Please complete this challenge in the components/HomePage/HomePage.js file.

• Use the useState hook to define two state variables: count and timer.

• Use the useEffect hook to start the timer when the timer state variable changes.

• Check the timer value. If it is zero, the effect returns early and doesn't do anything.

• If the timer value is not zero, it sets up an interval that decrements the timer value by 1 every second (1000 milliseconds).

• Return a cleanup function that clears the interval when the component is unmounted or when the timer value changes.

Example

Once you have completed the code, run it with the following command:

npm start

The finished result is as follows:

Summary

Congratulations! You have completed the Counter Game. You can practice more challenge in LabEx to improve your skills.