Uporaba state-ov v Reactu

Uporabimo funkcijo useState za ustvarjanje state-a, ki vsebuje ime produkta:

jsxconst state = useState('prod');

Kot rezultat bo konstanta state predstavljala array, v katerem bo v prvem elementu shranjeno ime produkta, v drugem pa funkcija za spreminjanje imena:

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

Za kratkost običajno ne uporabljajo vmesne konstante za array, ampak uporabijo destrukturiranje:

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

Izpišimo zdaj naš state z imenom produkta v neko markup:

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

Zberimo vse skupaj in dobimo naslednjo kodo:

jsximport React, { useState } from 'react';

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

export default App;

Če zaženemo to kodo, se bo sprva v div-u izpisala začetna vrednost state-a, v našem primeru 'prod'. Ob spremembi state-a preko funkcije setName se bo v markup-u avtomatično pojavila nova vrednost state-a.