Reaktywne operacje na tablicach obiektów w React

Nauczmy się teraz wykonywać reaktywne operacje na tablicach obiektów. W tym przypadku musimy przekazać do funkcji id elementu tablicy, z którym zamierzamy coś zrobić:

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

Aby coś zrobić z elementem, wpierw musimy go znaleźć, przeglądając całą tablicę pętlą:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// coś robimy z elementem
			}
			
			return note;
		}));
	}
}

Dla przykładu zmieńmy teksty znalezionego obiektu:

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

Na końcu każdej li dodaj przycisk, po naciśnięciu którego ta li będzie usuwana z listy.

Dane są trzy inputy. Na końcu każdej li dodaj przycisk, po naciśnięciu którego dane obiektu tej li będą trafiać do odpowiednich inputów.

Zmodyfikuj poprzednie zadanie tak, aby obok inputów znajdował się przycisk, po naciśnięciu którego dane z inputów będą trafiać do odpowiedniej li.