Reaktivita stavů v React

Pojďme se nyní podívat, jak funguje reaktivita. Zajišťuje, že při změně stavu se změny okamžitě zobrazí na obrazovce.

Podívejme se na příklad. Předpokládejme, že máme stav s názvem produktu:

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

Vypišme název produktu ve verstu:

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

Vytvořme nyní tlačítko, po jehož kliknutí se náš stav změní:

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

V obsluze kliknutí použijeme funkci setName, abychom nastavili produktu nový název:

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

Spojme celý náš kód dohromady. Výsledkem bude, že po stisknutí tlačítka se text okamžitě změní na novou hodnotu:

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

Používání samostatných obslužných funkcí není povinné. Lze použít anonymní šipkovou funkci:

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

Jsou dány stavy s křestním jménem a příjmením uživatele. Vypište je ve verstu. Vytvořte tlačítka pro změnu těchto stavů.