How to Increment and Decrement Number Using React Hooks

You have often seen that in ecommerce websites while selecting quantity of product you click on increment (+) and decrement (-) buttons. In this article, we will see that how to achieve it using React Hooks.

We are going to design four components for this.

  • App Component
  • Increment Button Component
  • Decrement Button Component
  • Display Component

Let’s start.

App Component

Here is the code of App Component.

‎
function App() {
  const [counter, setCounter] = useState(1);
  const incrementCounter = () => setCounter(counter + 1);
  let decrementCounter = () => setCounter(counter - 1);

  if(counter<=0) {
    decrementCounter = () => setCounter(1);
  }

  return (
    <div> 
      <ButtonIncrement onClickFunc={incrementCounter}/>
      <Display message={counter}/> 
      <ButtonDecrement onClickFunc={decrementCounter}/>
    </div>
  );
}
‎

App is the parent component. It will pass state and functions to it’s child components by props.

Note: Parent components can transfer its state and functions automatically to the child components using React’s mechanism called one-way-data flow.

In this component we are returning three components inside div. Each component is accepting props.

We have used the useState() hook to manage the counter state.

Using setCounter() function we are incrementing and decrementing counter by one.

We have stored function reference to incrementCounter and decrementCounter respectively.

Also, we have put if condition to reset value if it going below one which is default.

Increment Button Component

Here is the code of Increment Button Component.

‎
function ButtonIncrement(props) {
  
   return (
     <button style={{ marginLeft: '.5rem'}} onClick={props.onClickFunc}>
     +1
     </button>
   )
}
‎

This is the ButtonIncrement Component. It is taking props as a input. Inside props, onClickFunc is accessible from parent and onClickFunc refers to incrementCounter function inside App Component.

When onClick event fires inside ButtonIncrement component it calls incrementCounter function inside App Component.

Decrement Button Component

Here is the code of Decrement Button Component.

‎
function ButtonDecrement(props) {
  
  return (
    <button style={{ marginLeft: '.5rem'}} onClick={props.onClickFunc}>
    -1
    </button>
  )
}
‎

Decrement Button also behaves same as Increment Button, the only difference is that it calls decrementCounter function from App Component which decrements the value.

Display Component

Here is the code of Display Component.

‎
function Display(props) {
  return (
    <label style={{ marginLeft: '.5rem'}} >{props.message}</label>
  )
}
‎

In the App Component we have passed counter value as message prop. this message prop is accessible inside display component. Display component will only show the the value of counter in the label.

Full Working code

App.js

‎
import { useState } from 'react';

function ButtonIncrement(props) {
  
   return (
     <button style={{ marginLeft: '.5rem'}} onClick={props.onClickFunc}>
     +1
     </button>
   )
}

function ButtonDecrement(props) {
  
  return (
    <button style={{ marginLeft: '.5rem'}} onClick={props.onClickFunc}>
    -1
    </button>
  )
}

function Display(props) {
  return (
    <label style={{ marginLeft: '.5rem'}} >{props.message}</label>
  )
}

function App() {
  const [counter, setCounter] = useState(1);
  const incrementCounter = () => setCounter(counter + 1);
  let decrementCounter = () => setCounter(counter - 1);

  if(counter<=1) {
    decrementCounter = () => setCounter(1);
  }

  return (
    <div> 
      <ButtonIncrement onClickFunc={incrementCounter}/>
      <Display message={counter}/> 
      <ButtonDecrement onClickFunc={decrementCounter}/>
    </div>
  );
}

export default App;
‎

index.js

‎
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
‎

index.html

‎
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  
  </body>
</html>
‎

Note: We have used create-react-app to make this react application.

Output:

That’s it. Hope you can make it yourself.

Leave a Comment