How to Create a Counter in React JS

Author:
Saleh Mubashar
Updated date:
Apr 14, 2022 5:30 PM EDT

In this tutorial, we will learn how to create a simple counter in a React JS functional component. This is a very beginner-friendly tutorial, but projects like these are very useful in strengthening your React skills.

We will be using the useState hook in this tutorial. So let's start!

Create a New React App

Create a new React app using the following command:

npx create-react-app my-app

Next, open the app.js file and remove all the code present. We will write our counter code here. To start the local server or run the app, use the following command:

npm start

Below is a video showing how to create a react app

Get Started

Now we will create a simple functional component in the app.js page and also import the useState hook. Add the following code inside the file:

import {React, useState } from 'react'
 
export default function App() {
  return (
 
  )
}

Create HTML Elements

Now we will create the HTML code for the form. The styling will be done later. We need to create two buttons and a span tag to show the output. There will be three buttons: +, - and reset. Add the following code within the app.js file inside the return() function:

return (
  <div className="counter">
    <h1>React Counter</h1>
    <span className="counter__output"></span>
    <div className="btn__container">
      <button className="control__btn" >+</button>
      <button className="control__btn">-</button>
      <button className="reset">Reset</button>
    </div>
  </div>
)

Create States and Functions

Now we will create a state called counter that will store the counter value. The state will be initially set to 0. Every time user will click either on + or -, the value will change. The value will be displayed in the span tag. There will be three functions used to control the value.

increase - this will increment the value
decrease - this will decrement
reset - to reset the counter back to zero.

The complete code is given below:

import { React, useState } from 'react'
 
export default function App() {
  const [counter, setCounter] = useState(0);
 
  //increase counter
  const increase = () => {
    setCounter(count => count + 1);
  };
 
  //decrease counter
  const decrease = () => {
    setCounter(count => count - 1);
  };
 
  //reset counter 
  const reset = () =>{
    setCounter(0)
  }
 
  return (
    <div className="counter">
      <h1>React Counter</h1>
      <span className="counter__output">{counter}</span>
      <div className="btn__container">
        <button className="control__btn" onClick={increase}>+</button>
        <button className="control__btn" onClick={decrease}>-</button>
        <button className="reset" onClick={reset}>Reset</button>
      </div>
    </div>
  );
}

In the above code, we change the value of the state using setCounter(). To display the result, we use {count} inside the span. On click events are added to each button containing the corresponding functions.

Validation Check

Now we will add an if statement to prevent the value of the counter from going into negative digits. This is not necessary for this tutorial, as the counter is completely functional. But it is a useful thing, as it is not practical for a counter to have a negative value.

We will use an if statement to make the minimum value 0. The if statement will be added in the decrease() function.

//decrease counter
const decrease = () => {
  if (counter > 0) {
    setCounter(count => count - 1);
  }
};

In the above code, the value will decease only if the current value of the counter is more than 0.

CSS: The Icing on the Cake

Right now, the counter is completely functional, but it looks terrible. Now we will do some CSS to style it.

Create a new file called app.css (if it is not already create by default) and add the following code:

App.css

.counter {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    row-gap: 20px;
}
 
.counter h1 {
    color: rgb(16, 0, 54);
    font-size: 40px;
    font-family: cursive;
}
 
.counter__output {
    font-size: 40px;
    color: rgb(116, 7, 7);
}
 
.btn__container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    column-gap: 20px;
}
 
.control__btn {
    font-size: 20px;
    padding: 10px 20px;
    background-color: transparent;
    color: rgb(16, 0, 54);
    border: 1px solid rgb(16, 0, 54);
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
 
.control__btn:hover {
    background-color: rgb(16, 0, 54);
    color: rgb(255, 255, 255);
    border: 1px solid rgb(16, 0, 54);
}
 
.reset {
    width: 100px;
    font-size: 18px;
    padding: 10px 20px;
    background-color: transparent;
    color: rgb(16, 0, 54);
    border: 1px solid rgb(16, 0, 54);
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
 
.reset:hover {
    background-color: rgb(16, 0, 54);
    color: rgb(255, 255, 255);
    border: 1px solid rgb(16, 0, 54);
}

Apply the Styles

Now import this CSS to the app.js file using the following code.

import "./App.css"

The Final Output

Below is an image of the browser view of this app. As you can see, it looks god visually and is also functional.

Add Extra Features and Improve It as You Like!

And that is pretty much all you need to know for creating a simple counter in React JS. Of course, you can add extra features and improve it as you like, but these steps were the building blocks.

Until next time.

Goodbye!

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.