Operaciones reactivas en arrays de objetos en React

Ahora aprendamos a realizar operaciones reactivas en arrays de objetos. En este caso debemos pasar a la función id del elemento del array con el que planeamos hacer 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 hacer algo con un elemento, primero debemos encontrarlo, iterando todo el array con un bucle:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// hacemos algo con el elemento
			}
			
			return note;
		}));
	}
}

Como ejemplo, cambiemos los textos del 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;
		}));
	}
}

Al final de cada li agregue un botón, al hacer clic en el cual esta li será eliminada de la lista.

Se dan tres inputs. Al final de cada li agregue un botón, al hacer clic en el cual los datos del objeto de esta li aparecerán en los inputs correspondientes.

Modifique la tarea anterior de modo que junto a los inputs haya un botón, al hacer clic en el cual los datos de los inputs aparecerán en la li correspondiente.