Использование стейтов в React

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

jsxconst state = useState('prod');

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

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

Для краткости обычно не используют промежуточную константу для массива, а используют деструктуризацию:

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

Давайте теперь выведем наш стейт с именем продукта в какой-нибудь верстке:

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 и верстке автоматически появится новое значение стейта.