Reaktiewe Datavertoning in React

Laat ons 'n skikking van voorwerpe hê wat die name en beskrywings van iets bevat:

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

Kom ons toon elke element van hierdie skikking in 'n aparte paragraaf:

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

Laat ons dit nou so maak dat die beskrywing aanvanklik weggesteek is, maar aan die einde van elke paragraaf voeg ons knoppies by om die beskrywing van daardie paragraaf te toon. Om dit te doen, voeg ons 'n eienskap show by elke produkvoorwerp wat die vertoning van die beskrywing reguleer:

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

Maak aan die einde van elke paragraaf 'n knoppie, waarop, wanneer gedruk, die volle beskrywing van die produk vertoon sal word.