Operações reativas em arrays de objetos em React

Agora vamos aprender a fazer operações reativas em arrays de objetos. Neste caso, precisamos passar para a função id do elemento do array com o qual pretendemos fazer algo:

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

Para fazer algo com um elemento, primeiro precisamos encontrá-lo, percorrendo todo o array com um loop:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// fazemos algo com o elemento
			}
			
			return note;
		}));
	}
}

Vamos, por exemplo, alterar os textos do objeto encontrado:

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

No final de cada li, adicione um botão que, ao ser clicado, removerá essa li da lista.

Existem três inputs. No final de cada li adicione um botão que, ao ser clicado, os dados do objeto dessa li serão colocados nos inputs correspondentes.

Modifique a tarefa anterior para que haja um botão ao lado dos inputs que, ao ser clicado, os dados dos inputs serão colocados na li correspondente.