Αντικειμενική προβολή δεδομένων στο 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,
	},
];

Στο τέλος κάθε παραγράφου δημιουργήστε ένα κουμπί, που upon click θα εμφανίζει την πλήρη περιγραφή του προϊόντος.