Реактивни операции над масиви от обекти в 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.