Reageerhaak useState_

Met de React useStateHook kunnen we de status in een functiecomponent volgen.

Staat verwijst over het algemeen naar gegevens of eigenschappen die in een toepassing moeten worden gevolgd.

ImporterenuseState

Om de useStateHook te gebruiken, moeten we importdeze eerst in onze component plaatsen.

import { useState } from "react";

Merk op dat we aan het destructureren zijn useStateomdat reacthet een benoemde export is.

InitialiserenuseState

We initialiseren onze status door useStateonze functiecomponent aan te roepen.

useStateaccepteert een beginstatus en retourneert twee waarden:

• De huidige staat.
• Een functie die de status bijwerkt.

import { useState } from "react";

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

Merk op dat we nogmaals de geretourneerde waarden van useState.

De eerste waarde, color, is onze huidige staat.

De tweede waarde, setColor, is de functie die wordt gebruikt om onze status bij te werken.

Ten slotte stellen we de beginstatus in op een lege tekenreeks:useState("")

Staat lezen

We kunnen onze staat nu overal in onze component opnemen.

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

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

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

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Status bijwerken

Om onze staat bij te werken, gebruiken we onze functie voor het bijwerken van de staat.

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

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

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

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Wat kan de staat bevatten?

De useStateHook kan worden gebruikt om strings, getallen, booleans, arrays, objecten en elke combinatie hiervan bij te houden!

We kunnen meerdere state Hooks maken om individuele waarden bij te houden.

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

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>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Of we kunnen slechts één staat gebruiken en in plaats daarvan een object opnemen!

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

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>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Objecten en arrays in status bijwerken

Wanneer de status wordt bijgewerkt, wordt de hele status overschreven.

Wat als we alleen de kleur van onze auto willen bijwerken?

Als we alleen zouden bellen setCar({color: "blue"}), zou dit het merk, model en jaar uit onze staat verwijderen.

We kunnen de JavaScript-spread-operator gebruiken om ons te helpen.

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

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>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Omdat we de huidige waarde van toestand nodig hebben, geven we een functie door aan onze setCarfunctie. Deze functie krijgt de vorige waarde.

We retourneren dan een object, verspreiden de previousStateen overschrijven alleen de kleur.

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}