Reaktiivsed operatsioonid objektide massiividega Reactis

Õpime nüüd tegema reaktiivseid operatsioone objektide massiividega. Sellisel juhul peame edastama funktsiooni id massiivi elemendi, millega me kavatseme midagi teha:

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

Selleks, et midagi teha elemendiga, peame kõigepealt selle leidma, läbides kogu massiivi tsükliga:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// teeme midagi elemendiga
			}
			
			return note;
		}));
	}
}

Muudame näiteks leitud objekti tekste:

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

Iga li lõppu tehke nupp, mille vajutamisel see li eemaldatakse nimekirjast.

Antud on kolm sisendvälja. Iga li lõppu tehke nupp, mille vajutamisel selle li objekti andmed lähevad vastavatesse sisendväljadesse.

Modifitseerige eelmist ülesannet nii, et sisendväljade kõrval oleks nupp, mille vajutamisel sisendväljade andmed lähevad vastavasse li.