A Simple React Counter with Input Value using React Hooks => UseState and UseReducer.

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:

ijayyyy / count

Created with CodeSandbox

count

Created with CodeSandbox https://count-app-one.vercel.app/

View on GitHub

.