Afișarea reactivă a datelor în React

Să presupunem că avem un array de obiecte, care conține denumirile și descrierile a ceva:

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

Să afișăm fiecare element din acest array într-un paragraf separat:

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

Acum să facem astfel încât descrierea să fie inițial ascunsă, dar la sfârșitul fiecărui paragraf să adăugăm butoane pentru afișarea descrierii din acel paragraf. Pentru aceasta, în fiecare obiect cu produs vom adăuga proprietatea show, care reglează afișarea descrierii:

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

La sfârșitul fiecărui paragraf faceți un buton, la click pe care se va afișa descrierea completă a produsului.