Reactieve bewerkingen op arrays van objecten in React

Laten we nu leren hoe we reactieve bewerkingen kunnen uitvoeren op arrays van objecten. In dit geval moeten we aan de functie id van het array-element doorgeven, waarmee we van plan zijn iets te doen:

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

Om iets met een element te doen, moeten we het eerst vinden door het hele array te doorlopen met een lus:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// doe iets met het element
			}
			
			return note;
		}));
	}
}

Laten we als voorbeeld de teksten van het gevonden object wijzigen:

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

Maak aan het einde van elke li een knop, waarbij bij het klikken deze li uit de lijst wordt verwijderd.

Er zijn drie invoervelden. Maak aan het einde van elke li een knop, waarbij bij het klikken de gegevens van het object van deze li in de bijbehorende invoervelden worden geplaatst.

Pas de vorige taak zo aan, dat er naast de invoervelden een knop is, waarbij bij het klikken de gegevens van de invoervelden in de bijbehorende li worden geplaatst.