Read State

We can now use our state throughout the component.

Example:

Utilize the state variable within the rendered component.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

Update State

To modify our state, we use the state updater function.

We should avoid updating state directly, such as using color = “red”, which is not permitted.

Example:

Use a button to change the state.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

What Can State Hold

The useState Hook can manage strings, numbers, booleans, arrays, objects, or any combination of these, and we can use multiple state Hooks to track different values.

Example:

Use multiple state Hooks.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Alternatively, we can use a single state with an object to manage multiple values.

Example:

Use a single Hook to manage an object.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Since we’re tracking a single object, we need to reference the object and its properties when rendering the component (e.g., car.brand).

Updating Objects and Arrays in State

When state is updated, the entire state is replaced. If we want to update only the color of our car, calling setCar({color: “blue”}) would remove the brand, model, and year.

Instead, we can use the JavaScript spread operator to preserve the existing properties.

Example:

Utilize the JavaScript spread operator to update just the color of the car.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Since we need the current state value, we pass a function to the setCar function. This function receives the previous state, and we return a new object that spreads the previous state while updating only the color.