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

Дар охири ҳар як абзац тугмае созед, ки пахш карданаш тавсифи пурраи маҳсул нишон дода мешавад.