Reaktivita stavov v React

Pozrime sa teraz na to, ako funguje reaktivita. Zabezpečuje, že pri zmene stavu sa zmeny okamžite zobrazia na obrazovke.

Pozrime sa na príklad. Predpokladajme, že máme stav s názvom produktu:

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

Vypíšme názov produktu v renderovanom kóde:

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

Vytvorme teraz tlačidlo, po kliknutí na ktoré sa náš stav zmení:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

V obslužnej rutine kliknutia použijeme funkciu setName, aby sme nastavili produktu nový názov:

function clickHandler() {
	setName('xxxx');
}

Dajme celý náš kód dokopy. Výsledkom bude, že po kliknutí na tlačidlo sa text okamžite zmení na novú hodnotu:

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

Použitie samostatných obslužných funkcií nie je povinné. Môžete použiť anonymnú funkciu so šípkovou syntaxou:

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

Sú dané stavy s menom a priezviskom používateľa. Vypíšte ich v renderovanom kóde. Vytvorte tlačidlá na zmenu týchto stavov.