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