Reaktiewe byvoeging van voorwerpe in 'n skikking in React

Laat ons nou die reaktiviteit van 'n skikking voorwerpe bestudeer. In hierdie geval sal ons enige veranderinge moet aanbring deur na elemente te verwys volgens hul id, wat binne die voorwerpe self gestoor is.

Kom ons probeer. Gestel ons het die volgende skikking voorwerpe:

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',
	},
];

Laat ons elke element van ons skikking in 'n aparte li-tag toon:

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>;
}

Maak 'n knoppie wat, wanneer dit gedruk word, 'n nuwe element by die einde van die skikking sal byvoeg, sodat 'n nuwe li by die einde van die ul-tag gevoeg word.

Maak drie insette en 'n knoppie. Gebruik die data van die insette om 'n nuwe li aan die einde van die ul-tag te skep wanneer die knoppie gedruk word.