Operasi Reaktif pada Array Objek di React

Sekarang mari kita belajar melakukan operasi reaktif terhadap array objek. Dalam kasus ini, kita harus meneruskan id elemen array ke fungsi, yang akan kita lakukan sesuatu dengannya:

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 sebuah elemen, pertama-tama kita harus mencarinya dengan mengiterasi seluruh array:

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

Sebagai contoh, mari kita ubah teks dari objek yang ditemukan:

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

Buat tombol di akhir setiap li, yang ketika ditekan akan menghapus li tersebut dari daftar.

Diberikan tiga input. Buat tombol di akhir setiap li, yang ketika ditekan, data objek dari li tersebut akan dimasukkan ke dalam input yang sesuai.

Modifikasi tugas sebelumnya sehingga ada tombol di sebelah input, yang ketika ditekan, data dari input akan dimasukkan ke dalam li yang sesuai.