Brug af states i React

Lad os bruge funktionen useState til at oprette en state, der indeholder produktets navn:

jsxconst state = useState('prod');

Som et resultat vil konstanten state være et array, hvor det første element vil indeholde produktets navn, og det andet - en funktion til at ændre navnet:

jsxconst state   = useState('prod');
const name    = state[0];
const setName = state[1];

For korteheds skyld bruger man normalt ikke en mellemliggende konstant for arrayet, men bruger destrukturering:

jsxconst [name, setName] = useState('prod');

Lad os nu udskrive vores state med produktnavnet i en eller anden layout:

jsxreturn <p>
  <span>{name}</span>
</p>;

Lad os samle alt sammen og få følgende kode:

jsximport React, { useState } from 'react';

function App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
  </div>;
}

export default App;

Hvis du kører denne kode, vil startværdien af staten blive vist i div'en, i vores tilfælde 'prod'. Når staten ændres via funktionen setName, vil den nye statsværdi automatisk blive vist i layoutet.