Използване на състояния в React

Ще използваме функцията useState за създаване на състояние, съдържащо името на продукта:

jsxconst state = useState('prod');

В резултат константата state ще представлява масив, в първия елемент на който ще се съхранява името на продукта, а във втория - функция за промяна на името:

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

За краткост обикновено не се използва междинна константа за масива, а се използва деструктуриране:

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

Сега нека да изведем нашето състояние с името на продукта в някакъв HTML:

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;

Ако стартирате този код, първоначално в дива ще бъде изведена началната стойност на състоянието, в нашия случай 'prod'. При промяна на състоянието чрез функцията setName в HTML-а автоматично ще се появи новата стойност на състоянието.