A Simple React Counter with Input Value using React Hooks => UseState and UseReducer.
Tags: react, counter, codes, usereducer
Published: 2023-01-15 01:47:15

Hello techie, In this post, you will learn two different ways to create a **Counter App** with input value using two **React Hooks: useState** and **useReducer!**

**Counter 1: UseState Hook:** 
First thing to do is import _React and UseState._
```
import React, {useState} from "react";
```
**Set the State:** After importing, declare a useState then set the default count to "0"
```
  const [count, setCount] = useState(0);
```

**Declare the Functions and set the Buttons:** _Increment, Decrement, Reset_

- The increment button adds 1 to the input value

- The decrement button subtracts 1 from the input value

- The Reset button sets the value back to the initial state '0'
 
You also update the state of the count which was earlier set to '0' with _setCount._
 
```
const increment = (event) => {
    event.preventDefault();
    setCount((prevCount) => prevCount + 1);
  };
```

```
 const decrement = (event) => {
    event.preventDefault();
    setCount((prevCount) => prevCount - 1);
  };
```

```
const reset = (event) => {
    event.preventDefault();
    setCount(0);
  };
```
**Input value function:** This changes the count value as you type in a value. 
_ParseInt returns an integer value to enable the increment_

```
const changeValue = (value) => {
    setCount(parseInt(value));
  };

```
**useState Code Block**

```
import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const increment = (event) => {
    event.preventDefault();
    setCount((prevCount) => prevCount + 1);
  };

  const decrement = (event) => {
    event.preventDefault();
    setCount((prevCount) => prevCount - 1);
  };

  const reset = (event) => {
    event.preventDefault();
    setCount(0);
  };
  const changeValue = (value) => {
    setCount(parseInt(value));
  };

  return (
    <div>
      <div className="counter-container">
        <h1>Count: {count}</h1>
        <input type="number" placeholder="set value" />
        <button
          onClick={(event) => {
            if (event.key === "Enter") {
              changeValue(event.target.value);
            }
          }}
        >
          Enter
        </button>
        <div className="counter">
          <button onClick={increment} className="increment">
            Increment
          </button>
          <button onClick={decrement} className="decrement">
            Decrement
          </button>
        </div>
        <button onClick={reset} className="reset">
          Reset
        </button>
      </div>
  );
}
export default Counter;

```

**Counter 2: Using useReducer**

Import ** React and useReducer** from react.

```
import React from "react";
import { useReducer } from "react";
```
**Declare a default state variable and a useReducer function**
 _using a switch case, set the increment, decrement, setvalue and update count state_

```
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: (state.count = 0) };
    case "setvalue":
      return { ...state, input: action.payload };
    case "updatecount":
      return { count: action.payload };
    default:
      return { count: state.count };
  }
};
```
The dispatch sends an action to the reducer to update the state.

updateTheCount function is used to update the count as you type in or change the input value.

changeCountValue function is an event that changes the value on click

```
function UseReducer() {
const [state, dispatch] = useReducer(reducer, initialCount);
  const updateTheCount = () => {
    dispatch({ type: "updatecount", payload: state.input - `${state.count}` });
  };
  const changeCountValue = (e) => {
    dispatch({ type: "setvalue", payload: e.target.value });
  };
```

**useReducer Code Block**

```
import React from "react";
import { useReducer } from "react";

const initialCount = { count: 0, input: "" };
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: (state.count = 0) };
    case "setvalue":
      return { ...state, input: action.payload };
    case "updatecount":
      return { count: action.payload };
    default:
      return { count: state.count };
  }
};

function UseReducer() {
const [state, dispatch] = useReducer(reducer, initialCount);
  const updateTheCount = () => {
    dispatch({ type: "updatecount", payload: state.input - `${state.count}` });
  };
  const changeCountValue = (e) => {
    dispatch({ type: "setvalue", payload: e.target.value });
  };
  return (
    <div>
      <h2 className="counter">Count: {state.count}</h2>
      <input
        type="number"
        value={state.input}
        onChange={changeCountValue}
        placeholder="set value"
      />
      <button onClick={updateTheCount}>Enter</button>
      <div className="counter">
        <button className="inc" onClick={() => dispatch({ type: "increment" })}>
          Increment
        </button>
        <button className="dec" onClick={() => dispatch({ type: "decrement" })}>
          Decrement
        </button>
      </div>
      <button className="reset" onClick={() => dispatch({ type: "reset" })}>
        Reset
      </button>
  );
}
export default UseReducer;

```
And that's a wrap! I hope you found this tutorial useful.
You can check the full implementation on my github link here:{% embed https://github.com/ijayyyy/count %}.