Penambahan Reaktif ke Array Objek di React

Mari kita pelajari reaktivitas array objek. Dalam kasus ini, kita harus melakukan perubahan apapun dengan mengacu pada elemen berdasarkan id yang disimpan di dalam objek itu sendiri.

Mari kita coba. Misalkan kita memiliki 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 tampilkan setiap elemen dari array kita dalam tag li terpisah:

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

Buatlah tombol yang, ketika diklik, akan menambahkan elemen baru di akhir array, sehingga menambahkan li baru di akhir tag ul.

Buatlah tiga input dan sebuah tombol. Saat tombol ditekan, buatlah li baru di akhir tag ul dari data input.