Penambahan Reaktif ke dalam Array Objek dalam React

Mari kita kaji kereaktifan array objek. Dalam kes ini, kita perlu melakukan sebarang perubahan dengan merujuk kepada elemen melalui id yang disimpan di dalam objek itu sendiri.

Mari kita cuba. Katakan kita mempunyai array objek berikut:

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

Mari kita paparkan setiap elemen daripada array kami dalam tag li yang berasingan:

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

Buatkan butang, yang apabila ditekan akan menambah elemen baharu di hujung array, sekaligus menambah li baharu di hujung tag ul.

Buatkan tiga input dan butang. Apabila butang ditekan, daripada data input, hasilkan li baharu di hujung tag ul.