Реактивни операции над низи од објекти во React

Ајде сега да научиме како да правиме реактивни операции над низи од објекти. Во овој случај, ние мора да го пренесеме во функцијата id на елементот од низата со кој ние планираме да направиме нешто:

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

За да направиме нешто со елементот, ние прво мора да го најдеме, преминувајќи ја целата низа со циклус:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// правиме нешто со елементот
			}
			
			return note;
		}));
	}
}

Ајде за пример да ги промениме текстовите на пронајдениот објект:

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

На крајот од секоја li направете копче, при кликнување на кое оваа li ќе биде отстранета од листата.

Дадени се три полиња за внесување. На крајот од секоја li направете копче, при кликнување на кое податоците од објектот на оваа li ќе се појават во соодветните полиња за внесување.

Модифицирајте ја претходната задача така што покрај полињата за внесување ќе има копче, при кликнување на кое податоците од полињата за внесување ќе се појават во соодветната li.