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

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

const state = useState('prod');

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

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

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

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

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

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 в HTML-а автоматично ще се появи новата стойност на състоянието.

Да приемем, че искате да показвате на екрана данни на потребителя: неговото име, фамилия, възраст. Направете за това съответните състояния с начални стойности.