Reaktive operationer på arrays af objekter i React

Lad os nu lære at udføre reaktive operationer på arrays af objekter. I dette tilfælde skal vi sende til funktionen id af array-elementet, som vi har til hensigt at gøre noget med:

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

For at gøre noget med et element, skal vi først finde det ved at gennemgå hele arrayet med en løkke:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// gør noget med elementet
			}
			
			return note;
		}));
	}
}

Lad os som eksempel ændre teksterne for det fundne objekt:

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

I slutningen af hver li lav en knap, der ved tryk vil fjerne denne li fra listen.

Der er givet tre inputfelter. I slutningen af hver li lav en knap, der ved tryk vil indsætte data fra denne li's objekt i de tilsvarende inputfelter.

Modificer den foregående opgave sådan, at der ved siden af inputfelterne er en knap, der ved tryk vil indsætte data fra inputfelterne i den tilsvarende li.