Reaktivne operacije na nizih objektov v Reactu

Zdaj se naučimo delati reaktivne operacije na nizih objektov. V tem primeru moramo funkciji posredovati id elementa niza, s katerim nameravamo nekaj narediti:

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 lahko nekaj naredimo z elementom, ga moramo najprej najti tako, da iteriramo čez celoten niz:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// naredimo nekaj z elementom
			}
			
			return note;
		}));
	}
}

Za primer spremenimo tekste najdenega 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 koncu vsakega li dodajte gumb, ob pritisku na katerega bo ta li odstranjen iz seznama.

Podani so trije vnosna polja. Na koncu vsakega li dodajte gumb, ob pritisku na katerega bodo podatki objekta tega li preneseni v ustrezna vnosna polja.

Spremenite prejšnjo nalogo tako, da so poleg vnosnih polj gumb, ob pritisku na katerega bodo podatki iz vnosnih polj preneseni v ustrezen li.