Выкарыстанне стэйтаў у 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 у вёрстцы аўтаматычна з'явіцца новае значэнне стэйта.

Няхай вы хочаце адлюстроўваць на экране даныя юзера: яго імя, прозвішча, узрост. Зрабіце для гэтага адпаведныя стэйты з пачатковымі значэннямі.