Operasi Reaktif pada Array Objek dalam React

Mari kita sekarang belajar melakukan operasi reaktif pada array objek. Dalam kes ini, kita perlu menyampaikan kepada fungsi id elemen array yang ingin kita lakukan sesuatu:

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>
			
			<button onClick={() => doSmth(note.id)}>
				btn
			</button>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Untuk melakukan sesuatu pada elemen, kita perlu mencarinya terlebih dahulu dengan mengulangi keseluruhan array dengan gelung:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// lakukan sesuatu pada elemen
			}
			
			return note;
		}));
	}
}

Mari kita ubah teks objek yang ditemukan sebagai contoh:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				note.prop1 += '!';
				note.prop2 += '!';
				note.prop3 += '!';
				
				return note;
			}
			
			return note;
		}));
	}
}

Buat butang di hujung setiap li, apabila ditekan, li ini akan dihapus dari senarai.

Diberikan tiga input. Buat butang di hujung setiap li, apabila ditekan, data objek li ini akan dimasukkan ke dalam input yang sepadan.

Ubah suai tugas sebelumnya supaya terdapat butang di sebelah input, apabila ditekan, data input akan dimasukkan ke dalam li yang sepadan.