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

සෑම යටිකුරු ඡේදයක අවසානයේ බොත්තමක් සාදන්න, එය එබූ විට සම්පූර්ණ නිෂ්පාදන විස්තරය පෙන්වනු ඇත.