Brug af states i React

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

const 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:

const 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:

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

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

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

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

import 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.

Antag, at du vil vise brugerdata på skærmen: deres fornavn, efternavn, alder. Opret de tilsvarende states med startværdier for dette.