Reaktive Datenanzeige in React

Nehmen wir an, wir haben ein Array von Objekten, die Namen und Beschreibungen von etwas enthalten:

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

Lassen Sie uns jedes Element dieses Arrays in einem separaten Absatz ausgeben:

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

Lassen Sie uns nun erreichen, dass die Beschreibung zunächst ausgeblendet ist, aber am Ende jedes Absatzes Schaltflächen zum Anzeigen der Beschreibung aus diesem Absatz hinzufügen. Dazu fügen wir jedem Produktobjekt eine Eigenschaft show hinzu, die die Anzeige der Beschreibung steuert:

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

Erstellen Sie am Ende jedes Absatzes eine Schaltfläche, bei deren Betätigung die vollständige Produktbeschreibung angezeigt wird.