რეაქციული მონაცემების ჩვენება React-ში

დავუშვათ, გვაქვს ობიექტების მასივი, რომელიც შეიცავს რაიმეს სახელებს და აღწერილობებს:

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

მოდით, ამ მასივის თითოეული ელემენტი გამოვსახოთ ცალკე აბზაცში:

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

მოდით ახლა გავაკეთოთ ისე, რომ აღწერილობა თავდაპირველად იყოს დამალული, მაგრამ ყოველი აბზაცის ბოლოს დავამატოთ ღილაკები ამ აბზაციდან აღწერილობის საჩვენებლად. ამისთვის თითოეულ ობიექტს პროდუქტთან ერთად დავამატოთ თვისება show, რომელიც არეგულირებს აღწერილობის ჩვენებას:

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

ყოველი აბზაცის ბოლოს გაუკეთეთ ღილაკი, რომელზე დაწკაპუნებით გამოჩნდება პროდუქტის სრული აღწერილობა.