Utilizarea stărilor în React

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

jsxconst 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:

jsxconst 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:

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

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

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

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

jsximport 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.