Reaktivnost stanja u React-u

Hajde sada da pogledamo kako funkcioniše reaktivnost. Ona čini da se pri promeni stanja promene trenutno prikazuju na ekranu.

Pogledajmo na primeru. Neka imamo stanje sa nazivom proizvoda:

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

Prikažimo naziv proizvoda u izgledu:

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

Napravimo sada dugme, čijim pritiskom će se naše stanje menjati:

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

U obrađivaču klika koristimo funkciju setName, da bismo postavili proizvodu novi naziv:

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

Sastavimo sav naš kod zajedno. Ispostavlja se da će se nakon pritiska na dugme tekst trenutno promeniti na novu vrednost:

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

Korišćenje posebnih funkcija-obrađivača nije obavezno. Može se koristiti anonimna streličasta funkcija:

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

Data su stanja sa imenom i prezimenom korisnika. Prikažite ih u izgledu. Napravite dugmad za menjanje ovih stanja.