Реактивност стања у React-у

Хајде сада да погледамо како функционише реактивност. Она чини да се при промени стања промене тренутно приказују на екрану.

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

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

Испишимо назив производа у верстању:

return <div>
	<span>{name}</span>
</div>;

Направимо сада дугме, при клику на које ће се наше стање мењати:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

У руковаоцу клика користимо функцију setName, да бисмо поставили производу нови назив:

function clickHandler() {
	setName('xxxx');
}

Скупимо сав наш код заједно. Испада да након клика на дугме текст тренутно мења на нову вредност:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

Коришћење посебних функција-руковалаца није обавезно. Може се користити анонимна стреличаста функција:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Дата су стања са именом и презименом корисника. Испишите их у верстању. Направите дугмад за измену ових стања.