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

प्रत्येक पैराग्राफ के अंत में एक बटन बनाएं, जिस पर क्लिक करने पर उत्पाद का पूरा विवरण दिखाई देगा।