Reaktiivne lisamine objektide massiivi Reactis

Uurime nüüd objektide massiivi reaktiivsust. Sel juhul peame tegema kõik muudatused, viidates elementidele nende id kaudu, mis on salvestatud objektide endi sisse.

Proovime. Olgu meil järgmine objektide massiiv:

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

Kuvame iga meie massiivi elemendi eraldi li märgendi sees:

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

Tehke nupp, mille vajutamisel lisatakse uus element massiivi lõppu, lisades sellega uue li ul märgendi lõppu.

Tehke kolm sisendväli ja nupp. Vajutades nuppu looge sisendväljade andmetest uus li ul märgendi lõppu.