Использование стейтов в 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 и верстке
автоматически появится новое значение стейта.
Пусть вы хотите отображать на экране данные юзера: его имя, фамилию, возраст. Сделайте для этого соответствующие стейты с начальными значениями.