4.7 update status that depends on letat preceden

In this lesson we explore an alternative way of managing the form state: instead of three separate useState calls, we combine title, amount and date into a single object that we manage with one call to useState. The important point is that the value we pass to useState is now an object, not a string or a number.

const [userInput, setUserInput] = useState({
  enteredTitle: '',
  enteredAmount: '',
  enteredDate: '',
});

Below the titleChangeHandler, comment out the previous setEnteredTitle line and call setUserInput instead. The trickiest part is to make sure the other two fields are not lost when we update one of them: we therefore use the spread operator to copy the previous state into the new one and only overwrite the field we are interested in.

const titleChangeHandler = (event) => {
  setUserInput({
    ...userInput,
    enteredTitle: event.target.value,
  });
};

What the spread does here

• If you have never seen this syntax, it simply takes an object and extracts every key/value pair from it.
• We then overwrite specific keys — here just enteredTitle — by listing them after the spread.
• The two other keys (enteredAmount, enteredDate) remain part of the new state because the spread copied them in.

Apply the same pattern in amountChangeHandler (overwrite enteredAmount) and in dateChangeHandler (overwrite enteredDate). You can now choose whichever style you prefer for your project: several useState calls, or a single object. This combined version is not perfect yet — there is still a subtle issue with depending on the previous state, which we will fix in the next lesson. See you there.

Summary

This lesson explains how to update React state that depends on the previous state using the spread operator. The key is to store state as an object containing multiple properties (title, creation date, etc.) and use the spread operator (...) to merge new values with existing ones, ensuring no data is lost when updating a single property.

Key points

• Use useState with an object containing multiple key-value pairs instead of separate state variables
• Apply the spread operator syntax {...previousState, updatedKey: newValue} to preserve existing properties when updating state
• This pattern prevents accidentally overwriting other state properties when making updates
• The spread operator ensures state updates depend correctly on the previous state value
• Handle form inputs by keeping existing data intact while only changing the targeted property

FAQ

Why use an object for state instead of separate useState calls?

Grouping related state in a single object makes it easier to manage dependencies and ensures you don't lose data when updating one property. This is especially important when multiple properties need to stay synchronized.

What does the spread operator do in React state updates?

The spread operator {...prevState} copies all properties from the previous state, allowing you to override only the specific properties you want to change. This ensures dependent state properties remain intact.

How do you prevent losing data when updating state with multiple properties?

Always use the spread operator pattern: setState({...previousState, propertyToUpdate: newValue}). This merges your updates with all existing properties rather than replacing the entire state object.