Reaktivitet av states i React

La oss nå se på hvordan reaktivitet fungerer. Den gjør at ved endring av state vises endringene øyeblikkelig på skjermen.

La oss se på et eksempel. Anta at vi har en state med navnet på produktet:

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

La oss vise produktnavnet i koden:

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

La oss nå lage en knapp som, når den klikkes, vil endre vår state:

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

I klikk-handleren bruker vi funksjonen setName, for å sette et nytt navn på produktet:

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

La oss sette sammen all koden vår. Resultatet blir at etter å ha klikket på knappen vil teksten umiddelbart endres til den nye verdien:

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

Bruk av separate handler-funksjoner er ikke obligatorisk. Du kan bruke en anonym pilfunksjon:

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

Det er gitt states med fornavn og etternavn til brukeren. Vis dem i koden. Lag knapper for å endre disse states.