Utilizarea stărilor în React

Vom folosi funcția useState pentru a crea o stare care conține numele produsului:

const state = useState('prod');

Ca rezultat, constanta state va reprezenta un array, în primul element al căruia va fi stocat numele produsului, iar în al doilea - funcția pentru modificarea numelui:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Pentru concizie, de obicei nu se folosește o constantă intermediară pentru array, ci se utilizează destructurarea:

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

Acum să afișăm starea noastră cu numele produsului în interfață:

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

Să punem totul la un loc și obținem următorul cod:

import React, { useState } from 'react';

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

export default App;

Dacă rulăm acest cod, inițial în div va fi afișată valoarea inițială a stării, în cazul nostru 'prod'. La modificarea stării prin funcția setName, în interfață va apărea automat noua valoare a stării.

Să presupunem că doriți să afișați pe ecran datele utilizatorului: prenumele, numele de familie, vârsta. Creați pentru aceasta stările corespunzătoare cu valori inițiale.