Реактивно прикажување на податоци во 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,
	},
];

На крајот од секој параграф направете копче, при кликнување на кое ќе се прикаже целосниот опис на производот.