Reaktyvus duomenų rodymas React

Tarkime, kad turime objektų masyvą, kuriame yra pavadinimai ir aprašymai:

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'ilgas aprašymas 1'
	},
	{
		id: id(),
		name: 'name2',
		desc: 'ilgas aprašymas 2'
	},
	{
		id: id(),
		name: 'name3',
		desc: 'ilgas aprašymas 3'
	},
];

Išveskime kiekvieną šio masyvo elementą atskiroje pastraipoje:

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

Dabar padarykime taip, kad aprašymas iš pradžių būtų paslėptas, bet kiekvienos pastraipos pabaigoje pridėkime mygtukus aprašymo rodymui iš šios pastraipos. Tam į kiekvieną objekto su produktu pridėkime savybę show, reguliuojančią aprašymo rodymą:

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'ilgas aprašymas 1',
		show: false,
	},
	{
		id: id(),
		name: 'name2',
		desc: 'ilgas aprašymas 2',
		show: false,
	},
	{
		id: id(),
		name: 'name3',
		desc: 'ilgas aprašymas 3',
		show: false,
	},
];

Kiekvienos pastraipos pabaigoje padarykite mygtuką, kurį paspaudus bus rodomas pilnas produkto aprašymas.