Shtimi reaktiv në një grup objektesh në React

Tani le të studiojmë reaktivitetin e një grupi objektesh. Në këtë rast, ne duhet të kryejmë çdo ndryshim, duke iu drejtuar elementeve përmes id, të cilat ruhen brenda vetë objekteve.

Le të provojmë. Le të themi se kemi grupin e mëposhtëm të objekteve:

const initNotes = [
	{
		id: 'GYi9G_uC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

Le të shfaqim secilin element të grupit tonë në një etiketë të veçantë li:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <li key={note.id}>
			<span>{note.prop1}</span>
			<span>{note.prop2}</span>
			<span>{note.prop3}</span>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Krijoni një buton, upon clicking on which do të shtohet një element i ri në fund të grupit, duke shtuar kështu një të ri li në fund të etiketës ul.

Krijoni tre inpute dhe një buton. Upon clicking on the button from the input data create a new li në fund të etiketës ul.