Reaktiewe bedrywighede op arrays van objekte in React

Laat ons nou leer hoe om reaktiewe bedrywighede op arrays van objekte te doen. In hierdie geval moet ons die funksie die id van die array-element gee, waarmee ons iets gaan 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 'n element te doen, moet ons dit eers vind deur die hele array te deurkruis met 'n lus:

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

Kom ons verander vir die voorbeeld die tekste van die gevinde objek:

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

Maak aan die einde van elke li 'n knoppie, waarmee hierdie li sal wees verwyder uit die lys.

Drie insette word gegee. Maak aan die einde van elke li 'n knoppie, waarmee die data van die objek van hierdie li sal in die ooreenstemmende insette verskyn.

Wysig die vorige taak so, dat daar 'n knoppie langs die insette is, waarmee die data van die insette in die ooreenstemmende li sal verskyn.