Reactда объектлар массивига реактив қўшиш

Келинг энди объектлар массиви реактивлигини ўрганамиз. Бу ҳолда биз ҳар қандай ўзгаришларни бажаришимиз керак, элементларга id орқали мурожаат қилиб, улар объектларнинг ўзида сақланади.

Келинг синаб кўрамиз. Бизда куйидаги объектлар массиви мавжуд деб фараз қилайлик:

const initNotes = [
	{
		id: 'GYi9G_uC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

Келинг массивимизнинг ҳар бир элементини алаҳида li тегида чиқарайлик:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <li key={note.id}>
			<span>{note.prop1}</span>
			<span>{note.prop2}</span>
			<span>{note.prop3}</span>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Тугма ясаингки, уни босганда массивнинг охирига янги элемент қўшилсин, шундай қилиб ul тегининг охирига янги li қўшилади.

Учта инпут ва бир тугма ясаинг. Тугмани босганда инпут маълумотларидан ul тегининг охирида янги li яратилсин.