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

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

`const state = useState('prod');`

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

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

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

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

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

`return <p> <span>{name}</span> </p>;`

Соберем все вместе и получим следующий код:

`import React, { useState } from 'react'; function App() { const [name, setName] = useState('prod'); return <div> <span>{name}</span> </div>; } export default App;`

Если запустить этот код, то изначально в диве выведется начальное значение стейта, в нашем случае `'prod'`. При изменение стейта через функцию `setName` и верстке автоматически появится новое значение стейта.

Пусть вы хотите отображать на экране данные юзера: его имя, фамилию, возраст. Сделайте для этого соответствующие стейты с начальными значениями.

← →
↑