Operazioni reattive su array di oggetti in React

Ora impariamo a eseguire operazioni reattive su array di oggetti. In questo caso dobbiamo passare alla funzione id dell'elemento dell'array con cui intendiamo fare qualcosa:

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

Per fare qualcosa con un elemento, prima dobbiamo trovarlo, iterando tutto l'array con un ciclo:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// facciamo qualcosa con l'elemento
			}
			
			return note;
		}));
	}
}

Ad esempio, modifichiamo i testi dell'oggetto trovato:

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

Alla fine di ogni li aggiungete un pulsante, al click del quale questa li verrà rimossa dall'elenco.

Sono dati tre input. Alla fine di ogni li aggiungete un pulsante, al click del quale i dati dell'oggetto di questa li appariranno nei rispettivi input.

Modificate il task precedente in modo che accanto agli input ci sia un pulsante, al click del quale i dati degli input appariranno nella corrispondente li.