Būsenų naudojimas React

Panaudokime funkciją useState būsenai, kurioje bus produkto pavadinimas, sukurti:

jsxconst state = useState('prod');

Dėl to konstanta state bus masyvas, kurio pirmame elemente bus saugomas produkto pavadinimas, o antrame - funkcija pavadinimui pakeisti:

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

Dėl trumpumo paprastai nenaudojama tarpinė konstanta masyvui, o naudojama destruktūrizacija:

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

Dabar atvaizduokime mūsų būseną su produkto pavadinimu kokioje nors žymėjimo struktūroje:

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

Sujungkime viską kartu ir gausime tokį kodą:

jsximport React, { useState } from 'react';

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

export default App;

Jei paleisite šį kodą, tai iš pradžių div elemente bus atvaizduota pradinė būsenos reikšmė, mūsų atveju 'prod'. Pakeitus būseną naudojant funkciją setName, žymėjimo struktūroje automatiškai atsiras nauja būsenos reikšmė.