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

Объекты в React также обладают реактивностью. Это значит, что при любых изменениях объектов, эти изменения сразу же будут отображаться на экране.

Также, как и при работе с массивами, изменения объектов следует производить иммутабельно, то есть не изменяя исходного объекта. Давайте посмотрим на примере. Пусть в стейте obj хранится объект:

function App() {
	const [obj, setObj] = useState({
		prop1: 'value1',
		prop2: 'value2',
		prop3: 'value3',
	});
	
	return <div>
		<span>{obj.prop1}</span>,
		<span>{obj.prop2}</span>,
		<span>{obj.prop3}</span>
	</div>;
}

Давайте изменим значение какого-либо из свойств нашего объекта.

Для этого можно выполнить изменения в копии объекта:

const copy  = Object.assign({}, obj);
copy.prop1 = '!';
setObj(copy);

А можно воспользоваться деструктуризацией:

setObj({...obj, ...{prop1: '!'}});

Сделайте 3 кнопки. Пусть первая кнопка изменяет значение свойства prop1, вторая - prop2, а третья - prop3.