Number counter

  • React
  • Exercises
  • Number counter

React exercise number 1

  • JSX
  • useState

Number counter

Let's build a React app to count numbers!

Quick start

Start with this code as a boilerplate for the exercise.


Step 1

Use the useState hook to keep the state of the counter.

Step 2

Implement the logic of the increment button. Every time the user clicks the increment button, the counter should be incremented by 1.

Step 3

Implement the reset button. Every time the user clicks the reset button, the counter should reset to 0.

Step 4

Create a new decrement button and add the logic to decrement the counter by 1 when clicked.

Step 5

Create a button with the text "Random" that, when clicked, sets the counter to a random value between 1 and 100. You can use the following function to generate a random number:

function getRandomNumberBetween(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);

Step 6

Don't allow the increment button to set the counter to more than 100.

Step 7

Don't allow the decrement button to set the counter to less than 0.