Реактивност на състоянията в 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-а. Направете бутони за промяна на тези състояния.