Published on

useObjectState Hook React

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>
  );
};