Používání stavů v Reactu

Použijeme funkci useState pro vytvoření stavu obsahujícího název produktu:

const state = useState('prod');

Výsledkem bude, že konstanta state bude představovat pole, v jehož prvním prvku bude uložen název produktu, a ve druhém - funkce pro změnu názvu:

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

Pro zkrácení obvykle nepoužívají mezilehlou konstantu pro pole, ale používají destrukturalizaci:

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

Nyní vypišme náš stav s názvem produktu do nějakého HTML:

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

Spojíme vše dohromady a získáme následující kód:

import React, { useState } from 'react';

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

export default App;

Pokud spustíte tento kód, zpočátku se v divu zobrazí počáteční hodnota stavu, v našem případě 'prod'. Při změně stavu pomocí funkce setName se v HTML automaticky objeví nová hodnota stavu.

Předpokládejme, že chcete zobrazovat na obrazovce data uživatele: jeho jméno, příjmení, věk. Vytvořte pro to odpovídající stavy s počátečními hodnotami.