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:
count
Created with CodeSandbox https://count-app-one.vercel.app/
.
Top comments (0)