Реактивность стейтов в 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>;
}

Даны стейты с именем и фамилией юзера. Выведите их в верстке. Сделайте кнопки для изменения этих стейтов.