Reaktivnost stanj v React

Poglejmo si zdaj, kako deluje reaktivnost. Zaradi nje se spremembe stanja takoj prikažejo na zaslonu.

Poglejmo si na primeru. Recimo, da imamo stanje z imenom izdelka:

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

Izpišimo ime izdelka v strukturi:

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

Naredimo zdaj gumb, ob kliku na katerega se bo naše stanje spremenilo:

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

V obravnavalcu klika uporabimo funkcijo setName, da nastavimo izdelku novo ime:

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

Zberimo vso kodo skupaj. Izkazalo se bo, da se bo po kliku na gumb besedilo takoj spremenilo v novo vrednost:

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

Uporaba ločenih funkcij-obravnavalcev ni obvezna. Uporabiti je možno anonimno puščično funkcijo:

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

Podana so stanja z imenom in priimkom uporabnika. Izpišite jih v strukturi. Naredite gumbe za spreminjanje teh stanj.