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