Reaktívne operácie nad poliami objektov v React

Poďme sa teraz naučiť robiť reaktívne operácie nad poliami objektov. V tomto prípade musíme odovzdať funkcii id prvku poľa, s ktorým sa chystáme niečo robiť:

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

Aby sme niečo urobili s prvkom, musíme ho najskôr nájsť preiterovaním cez celé pole:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// niečo robíme s prvkom
			}
			
			return note;
		}));
	}
}

Poďme pre príklad zmeniť texty nájdeného objektu:

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

Na konci každého li urobte tlačidlo, po stlačení ktorého sa toto li odstráni zo zoznamu.

Dané tri inputy. Na konci každého li urobte tlačidlo, po stlačení ktorého dáta objektu tohto li budú zapísané do zodpovedajúcich inputov.

Upravte predchádzajúcu úlohu tak, aby vedľa inputov bolo tlačidlo, po stlačení ktorého dáta inputov budú zapísané do zodpovedajúceho li.