Реактивӣ донидани массив аз объектҳо дар 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>;
}

Тугмае созед, ки пахш карданаш унсури нав ба охири массив илова мекунад, ва ин тавр як li-и нав ба охири теги ul меафзояд.

Се вурудии (input) ва як тугма созед. Пас аз пахш кардан ба тугма, аз маълумоти вурудӣ як li-и нав дар охири теги ul эҷод кунед.