რეაქციული მონაცემების ჩვენება 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,
  },
];