- Published on
useObjectState Hook React

useObjectState Hook React
useObjectState Code and Usage
useObjectState is a hook to manage state with object values.
import { useState } from "react";
const useObjectState = (initialState) => {
const [state, setState] = useState(initialState);
const updateState = (updatedValues) => {
setState((prevState) => ({ ...prevState, ...updatedValues }));
};
return [state, updateState];
};
// Usage
const ObjectStateExample = () => {
const [user, updateUser] = useObjectState({ name: "", age: 0 });
const handleInputChange = (event) => {
const { name, value } = event.target;
updateUser({ [name]: value });
};
return (
<div>
<input
type="text"
name="name"
placeholder="Name"
value={user.name}
onChange={handleInputChange}
/>
<input
type="number"
name="age"
placeholder="Age"
value={user.age}
onChange={handleInputChange}
/>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
</div>
);
};