Коришћење стања у 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 у верстању ће аутоматски да се појави нова вредност стања.

Претпоставимо да желите да прикажете на екрану податке корисника: његово име, презиме, године. Направите за то одговарајућа стања са почетним вредностима.