Рэактыўнасць стэйтаў у 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>;
}

Дадзены стэйты з імем і прозвішчам карыстальніка. Вывядзіце іх у вёрстцы. Зрабіце кнопкі для змянення гэтых стэйтаў.