Uonyesho wa Data Unaogea katika React

Acha tuwe na safu ya vitu, iliyo na majina na maelezo ya kitu fulani:

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

Wacha tuonyeshe kila kipengele cha safu hii katika aya tofauti:

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

Wacha sasa tufanye ili maelezo yawe yamefichwa awali, lakini mwisho wa kila aya tuongeze vitufe vya kuonyesha maelezo kutoka kwenye aya hiyo. Ili kufanya hivyo, kwa kila kitu ongeza sifa show, inayodhibiti uonyeshaji wa maelezo:

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

Mwisho wa kila aya fanya kitufe, kubonyeza ambayo kitaonyesha maelezo kamili ya bidhaa.