Reaktivitet af states i React

Lad os nu se på, hvordan reaktivitet fungerer. Den gør, at når statten ændres, vises ændringerne øjeblikkeligt på skærmen.

Lad os se på et eksempel. Antag, at vi har en state med produktets navn:

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

Lad os vise produktnavnet i layoutet:

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

Lad os nu lave en knap, der, når den klikkes på, vil ændre vores state:

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

I klik-håndteringen bruger vi funktionen setName for at indstille et nyt navn for produktet:

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

Lad os samle al vores kode sammen. Resultatet bliver, at efter at have klikket på knappen, vil teksten øjeblikkeligt blive ændret til den nye værdi:

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

Det er ikke obligatorisk at bruge separate håndteringsfunktioner. Man kan bruge en anonym pilfunktion:

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

Der er givet states med brugerens fornavn og efternavn. Vis dem i layoutet. Lav knapper til at ændre disse states.