Multiple state values

Learn to use several useState calls in one component.

Multiple pieces of state

A component can have several pieces of state. You make a separate useState call for each: const [name, setName] = useState("") and const [age, setAge] = useState(0).

You can also group related values into one object: const [form, setForm] = useState({name: "", age: 0}). Then you update with spread: setForm(f => ({...f, name: "Alex"})).

Both approaches are fine; choose based on how related the values are.

Updating object state

When updating object state, direct mutation: form.name = "Alex" is wrong. React does not see it.

The right way is to produce a new object with spread: setForm(f => ({...f, name: "Alex"})). It keeps the old fields and changes only name.

Later we will see useReducer for tidier object updates; for now spread is enough.

Exercise Two pieces of state

Complete the skeleton. Write a Profile component; import useState. Define const [name, setName] = useState("Alex"); and const [age, setAge] = useState(30);. Return <p>{name} - {age}</p>. Export it.

Show example solution

import { useState } from "react";

function Profile() {
  const [name, setName] = useState("Alex");
  const [age, setAge] = useState(30);
  return <p>{name} - {age}</p>;
}

export default Profile;

Test yourself

Multiple state values: match the terms

name

Name state
age

Age state
form

Object state
spread ...f

Object update
What is the clean way to hold related name and age?
```
Object state updates with spread.
```
- Two separate useState
- A single object useState
- A prop
- A global variable
Show answer

A single object useState — Grouping related values in one object makes updates easier.

Multiple state values: fill in the missing part

setForm(f => ({ ...f, name: ____ }))

Show answer

setForm(f => ({ ...f, name: "Alex" }))

Next lesson: Summary - useState

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies