Користење на state-и во React

Ќе ја искористиме функцијата useState за креирање state кој содржи име на производ:

jsxconst state = useState('prod');

Како резултат, константата state ќе претставува низа, во чиј прв елемент ќе се чува името на производот, а во вториот - функција за промена на името:

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

За краток запис обично не се користи посредна константа за низата, туку се користи деструктурирање:

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

Ајде сега да го прикажеме нашиот state со името на производот во некој вид на markup:

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

Да собереме сè заедно и ќе го добиеме следниот код:

jsximport React, { useState } from 'react';

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

export default App;

Ако се стартува овој код, првично во div-от ќе се прикаже почетната вредност на state-от, во нашиот случај 'prod'. При промена на state-от преку функцијата setName во markup-от автоматски ќе се појави новата вредност на state-от.