Používanie stavov v React

Použijeme funkciu useState pre vytvorenie stavu, ktorý obsahuje názov produktu:

const state = useState('prod');

Výsledkom bude, že konštanta state bude predstavovať pole, v prvom prvku ktorého sa bude ukladať názov produktu, a v druhom - funkcia na zmenu názvu:

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

Pre stručnosť sa zvyčajne nepoužíva medzikonštanta pre pole, ale používa sa destrukturalizácia:

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

Teraz využime náš stav s menom produktu v nejakom renderovaní:

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

Dajme všetko dokopy a získame nasledujúci kód:

import React, { useState } from 'react';

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

export default App;

Ak spustíme tento kód, spočiatku sa v dive zobrazí počiatočná hodnota stavu, v našom prípade 'prod'. Pri zmene stavu pomocou funkcie setName sa v renderovaní automaticky objaví nová hodnota stavu.

Predpokladajme, že chcete zobraziť na obrazovke údaje používateľa: jeho meno, priezvisko, vek. Vytvorte pre to príslušné stavy s počiatočnými hodnotami.