Αντιδραστικές πράξεις σε πίνακες αντικειμένων στο React

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

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>
			
			<button onClick={() => doSmth(note.id)}>
				btn
			</button>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Για να κάνουμε κάτι με ένα στοιχείο, πρώτα πρέπει να το βρούμε, επαναλαμβάνοντας ολόκληρο τον πίνακα με βρόχο:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// κάνουμε κάτι με το στοιχείο
			}
			
			return note;
		}));
	}
}

Ας αλλάξουμε για παράδειγμα τα κείμενα του βρεθέντος αντικειμένου:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				note.prop1 += '!';
				note.prop2 += '!';
				note.prop3 += '!';
				
				return note;
			}
			
			return note;
		}));
	}
}

Στο τέλος κάθε li βάλτε ένα κουμπί, με το πάτημα του οποίου αυτή η li θα διαγράφεται από τη λίστα.

Δίνονται τρία πεδία εισαγωγής. Στο τέλος κάθε li βάλτε ένα κουμπί, με το πάτημα του οποίου τα δεδομένα του αντικειμένου αυτής της li θα πηγαίνουν στα αντίστοιχα πεδία εισαγωγής.

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