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 түзүлсүн.