Tampilan Data Reaktif di React

Misalkan kita memiliki array objek, yang berisi nama dan deskripsi 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 tampilkan setiap elemen dari array ini dalam paragraf terpisah:

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 agar deskripsi awalnya tersembunyi, tetapi di akhir setiap paragraf kita tambahkan tombol untuk menampilkan deskripsi dari paragraf tersebut. Untuk melakukan ini, tambahkan properti show ke setiap objek produk, yang mengatur tampilan deskripsi:

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 akhir setiap paragraf, buat tombol, yang ketika ditekan akan menampilkan deskripsi lengkap produk.