Bruk av stater i React

La oss bruke funksjonen useState for å opprette en state som inneholder produktnavnet:

const state = useState('prod');

Resultatet vil være at konstanten state vil representere en array, hvor det første elementet vil inneholde produktnavnet, og det andre - en funksjon for å endre navnet:

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

For korthets skyld bruker man vanligvis ikke en mellomliggende konstant for arrayen, men bruker destrukturering:

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

La oss nå vise vår state med produktnavnet i noen markup:

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

La oss sette 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 kjører denne koden, vil startverdien til staten blir vist i div-en, i vårt tilfelle 'prod'. Når staten endres via funksjonen setName, vil den nye staten automatisk vises i markupen.

Anta at du vil vise brukerdata på skjermen: fornavn, etternavn, alder. Opprett tilsvarende stater med startverdier for dette.