Reactivitatea stărilor în React

Să vedem acum cum funcționează reactivitatea. Ea face ca, la modificarea stării, schimbările să fie afișate instantaneu pe ecran.

Să ne uităm la un exemplu. Să presupunem că avem o stare cu numele produsului:

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

Să afișăm numele produsului în marcaj:

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

Să facem acum un buton, la click pe care starea noastră se va modifica:

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

În handler-ul de click folosim funcția setName, pentru a seta produsului un nume nou:

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

Să adunăm tot codul nostru împreună. Va rezulta că după apăsarea butonului textul se va schimba instantaneu la noua valoare:

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

Utilizarea unor funcții handler separate nu este obligatorie. Poți folosi o funcție arrow anonimă:

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

Sunt date stările cu numele și prenumele utilizatorului. Afișați-le în marcaj. Faceți butoane pentru modificarea acestor stări.