Increment Decrement Counter in React hooks

by

In this tutorial, you will learn to create an increment and decrement counter in react hooks with a simple source code that will be easy to understand.

You have also seen this feature on the many shopping websites where you will get an option to increase or decrease the number of products to order after adding products to the cart.

Here, I have created increment or decrement functionality with the group of increment button {plus (+) button}, decrement button {minus (-) button } and a text input field.  So that –

  • When you click the plus button, It will increase the input value  by 1
  • When you click the minus button, It will decrease the input value by 1
  • You can click both buttons multiple times to increase or decrease the input value multiple times by 1.
  • You can also, enter a number into the input field, you can also increase or decrease that number by clicking the plus or minus button.
  •  You can not decrease the value to less than 0 and greater than 10. If you need to change this validation, you can put your own custom validation range instead of 0 and 10

react increment decrement

To understand its functionality, you will have to read the following examples carefully –

By default, you will see the 0 value in the input field, if you click the plus button the first time,  then 0 will be 1, and again click the same, then 1 will be 2 and if you continue the same, the last value will be increased by one each time.

Suppose you have increased the input value up to 8 then when you click the minus button the first time,  then 8 will be 7, and again click the same, then 7 will be 6 and if you continue the same, the last value will be decreased by one each time.

Learn Also –

Create a React Weather App

Create a Simple React Todo App

Increment and Decrement Number Button in React Js

In this tutorial, I have created a Weather App using React Hooks and functional components. Once, you learn it, you can easily create it yourself using the class component

Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure

reactapp/
   |
  src/
   |__IDcounter/
   |   |__IncDecCounter.js
   |__App.js
   |__index.js

I have used bootstrap 4 to create a responsive weather app. So, You should install it with the following command

npm install bootstrap

Also, you have to import it into the App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

For more information, you can learn How to use Bootstrap in React Js

Create Increment Decrement Counter Component

To create a counter component, you will have to implement the following steps –

  • First of all, create a Counter functional component
  • Also, create an HTML input field, two-button within return() for increasing & decreasing the number
  • Define a state using state hooks to update increment & decrement Number
  • Create incNum arrow function  and write code to increase a number by 1
  • Also, the decNum arrow function and write code to decrease a number by 1
  • Also, create an arrow function handleChange() to handle the input changes
  • At last, the export counter

File Name – IncDecCounter.js

import {useState} from "react";
function IncDecCounter(){
  let [num, setNum]= useState(0);
  let incNum =()=>{
    if(num<10)
    {
    setNum(Number(num)+1);
    }
  };
  let decNum = () => {
     if(num>0)
     {
      setNum(num - 1);
     }
  }
 let handleChange = (e)=>{
   setNum(e.target.value);
  }

   return(
    <>
    <div className="col-xl-1">
    <div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button" onClick={decNum}>-</button>
  </div>
  <input type="text" class="form-control" value={num} onChange={handleChange}/>
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button" onClick={incNum}>+</button>
  </div>
</div>
</div>
   </>
  );
}

export default IncDecCounter;

Render Increment Decrement Counter

To render weather components, You should import the Increment decrement counter component into the App component and return  <IncrementDecrementCounter />

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";
import IncDecCounter from "./IDcounter/IncDecCounter";
function App() {
  render(){
  return (
    <IncDecCounter />
  );
  }
}
export default App;

Run React Weather App

After completing the previous step, you will have to start the development server to run the Increment and Decrement Counter Application.

npm start

You can test it by opening the following URL in your web browser

http://localhost:3000/