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

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

jsxconst 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'
  },
];

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

jsxfunction 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 เพื่อควบคุมการแสดงคำอธิบาย:

jsxconst 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,
  },
];