การแสดงข้อมูลแบบรีแอคทีฟใน React

สมมติว่าเรามีอาเรย์ของออบเจ็กต์ ซึ่งภายในประกอบด้วย ชื่อและคำอธิบายของบางสิ่ง:

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'long description 1'
	},
	{
		id: id(),
		name: 'name2',
		desc: 'long description 2'
	},
	{
		id: id(),
		name: 'name3',
		desc: 'long description 3'
	},
];

ลองแสดงแต่ละองค์ประกอบของอาเรย์นี้ ในบรรทัดใหม่แยกกัน:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <p key={note.id}>
			{note.name}, 
			<i>{note.desc}</i>
		</p>;
	});
	
	return <div>
		{result}
	</div>;
}

ตอนนี้ลองทำให้คำอธิบาย ถูกซ่อนไว้ตั้งแต่แรก แต่เพิ่มปุ่ม สำหรับแสดงคำอธิบายที่ท้ายแต่ละบรรทัด สำหรับบรรทัดนั้นๆ เพื่อทำเช่นนี้ ในแต่ละออบเจ็กต์สินค้าให้เพิ่ม คุณสมบัติ show เพื่อควบคุมการแสดงคำอธิบาย:

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'long description 1',
		show: false,
	},
	{
		id: id(),
		name: 'name2',
		desc: 'long description 2',
		show: false,
	},
	{
		id: id(),
		name: 'name3',
		desc: 'long description 3',
		show: false,
	},
];

ที่ท้ายแต่ละบรรทัด ให้สร้างปุ่ม เมื่อคลิกที่ปุ่มนั้นจะแสดง คำอธิบายเต็มของสินค้า