Paparan Data Reaktif dalam React

Katakan kita mempunyai satu array objek yang mengandungi nama dan penerangan tentang sesuatu:

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

Mari kita paparkan setiap elemen array ini dalam perenggan yang berasingan:

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

Sekarang mari kita buat supaya penerangan pada asalnya disembunyikan, tetapi di hujung setiap perenggan kita tambahkan butang untuk memaparkan penerangan dari perenggan tersebut. Untuk melakukan ini, tambahkan sifat show kepada setiap objek produk, yang mengawal paparan penerangan:

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

Di hujung setiap perenggan, buatkan butang, yang apabila ditekan akan memaparkan penerangan penuh produk.