Shfaqja Reaktive e të Dhënave në React

Le të supozojmë se kemi një grup objektesh, që përmbajnë emrat dhe përshkrimet e diçkaje:

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

Le të shfaqim çdo element të këtij grupi në një paragraf të veçantë:

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

Tani le ta bëjmë në mënyrë që përshkrimi të jetë i fshehur fillimisht, por në fund të çdo paragrafi të shtojmë butona për të shfaqur përshkrimin nga ai paragraf. Për këtë, në çdo objekt produkti do të shtojmë vetinë show, që rregullon shfaqjen e përshkrimit:

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

Në fund të çdo paragrafi, bëni një buton, me klikim i cili do të shfaqë përshkrimin e plotë të produktit.