Reaktivní operace s poli objektů v Reactu

Nyní se naučme dělat reaktivní operace s poli objektů. V tomto případě musíme předat funkci id prvku pole, se kterým hodláme něco dělat:

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

Abychom něco udělali s prvkem, nejprve jej musíme najít procházením celého pole cyklem:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// něco děláme s prvkem
			}
			
			return note;
		}));
	}
}

Pro příklad změňme texty nalezeného objektu:

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

Na konci každé li vytvořte tlačítko, po jehož stisknutí se tato li odstraní ze seznamu.

Jsou dány tři inputy. Na konci každé li vytvořte tlačítko, po jehož stisknutí se data objektu této li dostanou do příslušných inputů.

Upravte předchozí úlohu tak, aby vedle inputů bylo tlačítko, po jehož stisknutí se data inputů dostanou do příslušné li.