Реактивне операције над низовима објеката у 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.prop2 += '!';
				
				return note;
			}
			
			return note;
		}));
	}
}

На крају сваког li направите дугме, притиском на које ће тај li бити уклоњен из списка.

Дата су три поља за унос. На крају сваког li направите дугме, притиском на које ће подаци објекта тог li бити уписани у одговарајућа поља за унос.

Модификујте претходни задатак тако да поред поља за унос буде дугме, притиском на које ће подаци из поља за унос бити уписани у одговарајући li.