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

Ҳар бир абзацнинг охирида тугма ясаинг, уни босганда продуктнинг тўлиқ тавсифи кўрсатилади.