Các thao tác phản ứng trên mảng đối tượng trong React

Bây giờ hãy học cách thực hiện các thao tác phản ứng trên mảng đối tượng. Trong trường hợp này, chúng ta phải truyền vào hàm id của phần tử mảng mà chúng ta định làm gì đó:

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

Để làm gì đó với một phần tử, trước tiên chúng ta phải tìm nó bằng cách lặp qua toàn bộ mảng:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// làm gì đó với phần tử
			}
			
			return note;
		}));
	}
}

Hãy thay đổi văn bản của đối tượng được tìm thấy làm ví dụ:

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

Ở cuối mỗi li, hãy tạo một nút, nhấn vào nó sẽ xóa li đó khỏi danh sách.

Cho ba trường nhập. Ở cuối mỗi li hãy tạo một nút, nhấn vào đó thì dữ liệu của đối tượng li đó sẽ đi vào các trường nhập tương ứng.

Hãy sửa đổi bài toán trước sao cho bên cạnh các trường nhập có một nút, nhấn vào nút đó thì dữ liệu từ các trường nhập sẽ đi vào li tương ứng.