Реактивност на состојбите во React

Ајде сега да погледнеме како работи реактивноста. Таа прави така што при промена на состојбата, промените моментално се прикажуваат на екранот.

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

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

Ќе го прикажеме името на производот во HTML-от:

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>;
}

Дадени се состојби со име и презиме на корисник. Прикажете ги во HTML-от. Направете копчиња за промена на овие состојби.