Hiển thị dữ liệu phản ứng trong React

Giả sử chúng ta có một mảng các đối tượng, chứa tên và mô tả của một thứ gì đó:

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

Hãy hiển thị từng phần tử của mảng này trong một đoạn văn riêng biệt:

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

Bây giờ hãy làm sao cho mô tả ban đầu bị ẩn đi, nhưng ở cuối mỗi đoạn văn thêm một nút để hiển thị mô tả của đoạn văn đó. Để làm điều này, hãy thêm thuộc tính show vào mỗi đối tượng sản phẩm, để điều chỉnh việc hiển thị mô tả:

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

Ở cuối mỗi đoạn văn, hãy tạo một nút, khi nhấn vào sẽ hiển thị mô tả đầy đủ của sản phẩm.