Αντίδραση Προσθήκης σε Πίνακα Αντικειμένων στο React

Ας μελετήσουμε τώρα την αντίδραση πίνακα αντικειμένων. Σε αυτήν την περίπτωση πρέπει να κάνουμε οποιεσδήποτε αλλαγές, προσπελαύνοντας τα στοιχεία μέσω id, τα οποία αποθηκεύονται μέσα στα ίδια τα αντικείμενα.

Ας δοκιμάσουμε. Ας υποθέσουμε ότι έχουμε τον ακόλουθο πίνακα αντικειμένων:

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

Ας εμφανίσουμε κάθε στοιχείο του πίνακα μας σε ξεχωριστή ετικέτα 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>;
}

Δημιουργήστε ένα κουμπί, upon pressing which θα προστίθεται ένα νέο στοιχείο στο τέλος του πίνακα, προσθέτοντας έτσι ένα νέο li στο τέλος της ετικέτας ul.

Δημιουργήστε τρία πεδία εισαγωγής και ένα κουμπί. Upon pressing στο κουμπί από τα δεδομένα του πεδίου εισαγωγής δημιουργήστε ένα νέο li στο τέλος της ετικέτας ul.