Reaktive Operationen auf Arrays von Objekten in React

Lassen Sie uns nun lernen, reaktive Operationen auf Arrays von Objekten durchzuführen. In diesem Fall müssen wir der Funktion id des Array-Elements übergeben, mit dem wir etwas tun wollen:

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

Um etwas mit einem Element zu machen, müssen wir es zuerst finden, indem wir das gesamte Array durchlaufen:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// etwas mit dem Element machen
			}
			
			return note;
		}));
	}
}

Lassen Sie uns als Beispiel die Texte des gefundenen Objekts ändern:

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

Machen Sie am Ende jeder li einen Button, bei dessen Klick diese li aus der Liste entfernt wird.

Es sind drei Inputs gegeben. Machen Sie am Ende jeder li einen Button, bei dessen Klick die Daten des Objekts dieser li in die entsprechenden Inputs gelangen.

Modifizieren Sie die vorherige Aufgabe so, dass sich neben den Inputs ein Button befindet, bei dessen Klick die Daten der Inputs in die entsprechende li gelangen.