Operații reactive pe array-uri de obiecte în React

Să învățăm acum cum să efectuăm operații reactive pe array-uri de obiecte. În acest caz, trebuie să transmitem funcției id-ul elementului din array cu care intenționăm să facem ceva:

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

Pentru a face ceva cu un element, trebuie mai întâi să îl găsim, iterând prin tot array-ul cu o buclă:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// facem ceva cu elementul
			}
			
			return note;
		}));
	}
}

Să schimbăm, de exemplu, textele obiectului găsit:

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

La sfârșitul fiecărei li faceți un buton, la click pe care acea li va fi ștearsă din listă.

Sunt date trei input-uri. La sfârșitul fiecărei li faceți un buton, la click pe care datele obiectului acelei li vor apărea în input-urile corespunzătoare.

Modificați problema anterioară astfel încât lângă input-uri să fie un buton, la click pe care datele din input-uri vor apărea în li-ul corespunzător.