Reaktivne operacije nad nizovima objekata u React-u

Hajde sada da naučimo kako da radimo reaktivne operacije nad nizovima objekata. U ovom slučaju, moramo da prosledimo funkciji id elementa niza sa kojim planiramo nešto da uradimo:

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

Da bismo nešto uradili sa elementom, prvo ga moramo pronaći, prolazeći kroz ceo niz u petlji:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// nešto radimo sa elementom
			}
			
			return note;
		}));
	}
}

Hajde, na primer, da promenimo tekstove pronadjenog objekta:

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

Na kraju svake li dodajte dugme, čijim pritiskom će se ta li ukloniti sa liste.

Data su tri input polja. Na kraju svake li dodajte dugme, čijim pritiskom će podaci objekta te li biti smestiti u odgovarajuća input polja.

Modifikujte prethodni zadatak tako da pored input polja postoji dugme, čijim pritiskom će podaci iz input polja biti smestiti u odgovarajuću li.