Reaktīvas darbības ar objektu masīviem React

Tagad iemācīsimies veikt reaktīvas darbības ar objektu masīviem. Šajā gadījumā mums funkcijā jānodod id masīva elementa, ar kuru mēs plānojam kaut ko darīt:

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

Lai kaut ko izdarītu ar elementu, mums vispirms tas jāatrod, izskatot visu masīvu ar ciklu:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// kaut ko darām ar elementu
			}
			
			return note;
		}));
	}
}

Piemēram, mainīsim atrastā objekta tekstus:

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

Katras li beigās izveidojiet pogu, uz kuras nospiežot šī li tiks izdzēsta no saraksta.

Doti trīs ievades lauki. Katras li beigās izveidojiet pogu, uz kuras nospiežot šīs li objekta dati tiks ievietoti atbilstošajos ievades laukos.

Modificējiet iepriekšējo uzdevumu tā, lai blakus ievades laukiem būtu poga, uz kuras nospiežot ievades lauku dati tiks ievietoti atbilstošajā li.