Reactieve weergave van gegevens in React

Stel dat we een array van objecten hebben, die namen en beschrijvingen van iets bevatten:

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

Laten we elk element van deze array weergeven in een aparte alinea:

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

Laten we het nu zo maken dat de beschrijving initieel verborgen is, maar aan het einde van elke alinea voegen we knoppen toe om de beschrijving van die alinea te tonen. Hiervoor voegen we aan elk object met een product de eigenschap show toe, die de weergave van de beschrijving regelt:

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

Maak aan het einde van elke alinea een knop, waarbij bij het klikken de volledige beschrijving van het product wordt getoond.