Operacione Reaktive mbi Vargje të Objekteve në React

Tani le të mësojmë si të kryejmë operacione reaktive mbi vargje objektesh. Në këtë rast, ne duhet t'i kalojmë funksionit id të elementit të vargut me të cilin po synojmë të bëjmë diçka:

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

Për të bërë diçka me një element, së pari duhet ta gjejmë atë, duke kaluar nëpër të gjithë vargun me një cikël:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// bëj diçka me elementin
			}
			
			return note;
		}));
	}
}

Le të ndryshojmë tekstet e objektit të gjetur për shembull:

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

Në fund të çdo li bëni një buton, me klikimin e të cilit kjo li do të hiqet nga lista.

Janë dhënë tre inpute. Në fund të çdo li bëni një buton, me klikimin e të cilit të dhënat e objektit të kësaj li do të shkojnë në inputet përkatëse.

Modifikoni detyrën e mëparshme në mënyrë që pranë inputeve të ketë një buton, me klikimin e të cilit të dhënat e inputeve do të shkojnë në li përkatëse.