4.6 working with several states

We are going to lean on useState again to track every field of the form. At first, each piece of state is just an empty string — that is normal, because the inputs are empty when the component first renders. We then use array destructuring to receive the value and its setter from each useState call. 

const [enteredTitle, setEnteredTitle] = useState('');
const [enteredAmount, setEnteredAmount] = useState('');
const [enteredDate, setEnteredDate] = useState('');

Inside the existing titleChangeHandler we replace the previous console.log by a call to setEnteredTitle(event.target.value). The same pattern is repeated to manage the other two fields: above the return, declare an amountChangeHandler and a dateChangeHandler with the very same logic. On the amount and date inputs, plug those handlers via the onChange attribute.

Recap of what onChange does

  • It is a handler attached to form elements such as input, select or textarea.
  • It fires whenever the user changes the data inside the field.
  • In React, you assign your handler with onChange={amountChangeHandler} — passing the function reference, not calling it.
const amountChangeHandler = (event) => {
  setEnteredAmount(event.target.value);
};

const dateChangeHandler = (event) => {
  setEnteredDate(event.target.value);
};

We now have three independent slices of state inside the same component, each updated by its own handler. You will run into this pattern very often: when a component owns more than one piece of state, you can keep them separated and update each one through its dedicated setter. Whether to use several useState calls or a single combined object is a design decision we will examine more closely in the next lesson.

Summary

This lesson demonstrates how to use multiple `useState` hooks within a single React component to manage different pieces of state independently. The instructor shows practical examples of handling form inputs (title, amount, and date) by creating separate state variables, defining their respective setter functions, and implementing `onChange` event handlers to capture and update user input values using `event.target.value`.

Key points

  • You can call `useState` multiple times in a single component to manage separate state variables
  • Each `useState` hook returns a destructured pair: the current state value and its setter function
  • The `onChange` event handler is attached to form elements (input, select, textarea) and triggers when user data changes
  • Extract form input values using `event.target.value` to update the corresponding state variable
  • Maintain separate, independent state for different form fields (e.g., title, amount, date) rather than combining them
  • Each state update function is called individually with the appropriate value from the event target

FAQ

Can you use multiple `useState` hooks in one React component?

Yes, you can call `useState` as many times as you need. Each call creates an independent state variable with its own setter function, allowing you to manage different pieces of data separately within the same component.

How do you capture user input from form fields and update state?

Attach an `onChange` event handler to the form element (input, select, textarea) and access the user input value using `event.target.value`. Pass this value to the state setter function to update the state.

What is the difference between having multiple states versus a single combined state object?

Multiple separate states are simpler to manage and update individually, while a combined state object groups related data together. The lesson shows that having separate states for title, amount, and date makes it easier to handle each field independently.