Reaktiv tilläggning av objekt i array i React

Låt oss nu studera reaktiviteten hos en array av objekt. I det här fallet måste vi göra alla förändringar genom att referera till elementen via deras id som lagras inuti objekten själva.

Låt oss försöka. Låt oss anta att vi har följande array av objekt:

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

Låt oss visa varje element i vår array i en separat li-tagg:

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

Skapa en knapp som, när den klickas på, lägger till ett nytt element i slutet av arrayen, och därmed lägger till en ny li i slutet av ul-taggen.

Skapa tre inmatningsfält och en knapp. När du klickar på knappen, skapa en ny li i slutet av ul-taggen från indatafälten.