React-də massivlər üzərində reaktiv əməliyyatlar

Gəlin indi massiv elementləri üzərində reaktiv manipulyasiyaları necə etməyi öyrənək. Bunun üçün hər bir li-yə hadisə işləyicisi əlavə edəcəyik, onun parametri kimi bu li-nin massivdəki indeksini ötürəcəyik:

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

Funksiyamızın daxilində biz massivimizin elementi üzərində istənilən əməliyyatı yerinə yetirə bilərik:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // elementlə bir şey edək
		setNotes(copy);
	}
}

Rəqəmlərdən ibarət bir massiv verilmişdir. Onu ul siyahısı şəklində çıxarın. İstənilən li-yə kliklədikdə onun rəqəmini kvadratına yüksəldin.

Hər bir li-nin sonuna düymə edin, basmaqla həmin li siyahıdan silinsin.

Input verilmişdir. İstənilən li-yə kliklədikdə elə edin ki, həmin li-nin mətni inputa daxil olsun.

Əvvəlki məsələni elə dəyişin ki, inputun fokusunu itirdikdə dəyişdirilmiş mətn uyğun li-yə daxil olsun.

Düymə verilmişdir. Bu düyməyə kliklədikdə li-lərin sırasını tərsinə çevirin.