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

Ар бир абзацтын аягында баскыч жасагыла, аны басканда продуктунун толук сүрөттөмөсү көрсөтүлөт.