Reaktīvs datu attēlojums React

Pieņemsim, ka mums ir objektu masīvs, kas satur nosaukumus un aprakstus kaut kam:

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

Izvērsim katru šī masīva elementu atsevišķā rindkopā:

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

Tagad padarīsim tā, lai apraksts sākotnēji būtu paslēpts, bet katras rindkopas beigās pievienosim pogas apraksta attēlošanai no šīs rindkopas. Lai to izdarītu, katram objektam ar produktu pievienosim īpašību show, kas regulē apraksta attēlošanu:

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

Katras rindkopas beigās izveidojiet pogu, ar kuras nospiešanu tiks parādīts pilnais produkta apraksts.