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

প্রতিটি অনুচ্ছেদের শেষে একটি বোতাম তৈরি করুন, যাতে ক্লিক করলে সংশ্লিষ্ট পণ্যের সম্পূর্ণ বর্ণনা প্রদর্শিত হবে।