Operesheni za Mitindo kwa Arrays katika React

Hebu sasa tujifunze jinsi ya kufanya operesheni za mitindo kwa vipengele vya array. Ili kufanya hivyo, kwa kila li tutaweka kisikizi cha tukio, ambayo kwa parameta tuta kupitisha nambari ya li hiyo katika array:

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	
	const result = notes.map((note, index) => {
		return <li key={index} onClick={() => doSmth(index)}>
			{note}
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Ndani ya utendaji wetu tunaweza kufanya operesheni yoyote kwa kipengele chetu cha array:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // kufanya kitu na kipengele
		setNotes(copy);
	}
}

Array na nambari imetolewa. Itoe kwa mfumo wa orodha ul. Kwa kubofya kwa li yoyote inyarishe nambari yake kwa mraba.

Mwisho wa kila li fanya kifungo, kwa kubonyeza li hiyo itafutwa kutoka kwenye orodha.

Input imetolewa. Kwa kubofya kwa li yoyote fanya ili maandishi ya li hiyo ingie kwenye input.

Badilisha shida iliyopita ili kupoteza umakini wa input maandishi yaliyobadilishwa yaingie kwenye li inayofanana.

Kifungo kimetolewa. Kwa kubofya kwenye kifungo hiki geuza mpangilio wa li kwa nyuma.