การดำเนินการแบบรีแอคทีฟบนอาร์เรย์ของออบเจ็กต์ใน React

ตอนนี้มาเรียนรู้วิธีดำเนินการแบบรีแอคทีฟ บนอาร์เรย์ของออบเจ็กต์กัน ในกรณีนี้ เราต้องส่งเข้าไปในฟังก์ชัน id ขององค์ประกอบในอาร์เรย์ที่ เราต้องการจะทำบางอย่างด้วย:

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

เพื่อที่จะทำบางอย่างกับองค์ประกอบ ก่อนอื่นเราต้องค้นหามัน โดยการวนลูป ผ่านอาร์เรย์ทั้งหมด:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// ทำบางอย่างกับองค์ประกอบ
			}
			
			return note;
		}));
	}
}

ตัวอย่างเช่น มาลองเปลี่ยนข้อความ ของออบเจ็กต์ที่พบ:

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

ที่ส่วนท้ายของแต่ละ li ให้สร้างปุ่ม เมื่อกดที่ปุ่มนั้น li นั้นจะ ถูกลบออกจากรายการ

มีอินพุตสามช่อง ที่ส่วนท้ายของแต่ละ li ให้สร้างปุ่ม เมื่อกดที่ปุ่มนั้น ข้อมูลของออบเจ็กต์ใน li นั้นจะ ปรากฏในอินพุตที่ตรงกัน

ปรับเปลี่ยนโจทย์ก่อนหน้าโดยให้ มีปุ่มอยู่ข้างๆ อินพุต เมื่อกดที่ปุ่มนั้น ข้อมูลจากอินพุต จะถูกบันทึกลงใน li ที่ตรงกัน