Complex State Objects & Arrays

Managing Complex State Objects & Arrays

In real-world applications, state is rarely a simple number or boolean. Components frequently manage complex state objects with multiple nested properties.

Updating Object State

When updating an object state, you must copy all unchanged existing properties using the object spread operator (...) before overriding specific fields.

function UserForm() {
  const [user, setUser] = useState({
    name: "Alex",
    email: "alex@example.com",
    role: "Developer",
    theme: "dark"
  });

  const updateEmail = (newEmail) => {
    setUser(prevUser => ({
      ...prevUser,       // Copy all existing user properties (name, role, theme)
      email: newEmail   // Override only the email property
    }));
  };

  return (
    <div>
      <p>User: {user.name} ({user.email})</p>
      <button onClick={() => updateEmail("alex.new@example.com")}>
        Update Email
      </button>
    </div>
  );
}

[!CAUTION] Forgetting ...prevUser replaces the entire object state with only { email: newEmail }, accidentally deleting name, role, and theme!

Handling Dynamic Input Fields

You can handle multiple form inputs with a single state object by utilizing JavaScript computed property names [e.target.name].

function GenericForm() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
    bio: ""
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value // Dynamically updates username, password, or bio
    }));
  };

  return (
    <form>
      <input name="username" value={formData.username} onChange={handleChange} />
      <input name="password" type="password" value={formData.password} onChange={handleChange} />
      <textarea name="bio" value={formData.bio} onChange={handleChange} />
    </form>
  );
}

Summary & TL;DR

• When updating state objects, spread existing properties first: setUser({ ...prevUser, field: newValue }).
• Omiting the spread operator erases all other unmentioned object properties.
• Use computed property names [e.target.name]: e.target.value to manage multiple form inputs with a single state object.