Reactте массивдер боюнча реактивдик операциялар

Келгиле, азыр массив элементтери менен реактивдүү манипуляцияларды кантип жасаганыбызды үйрөнөлү. Бул үчүн ар бир li тегине окуяны иштетүүчүнү коёбуз, ал эми параметр катары бул liтин массивдеги номерин беребиз:

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

Функциябыздын ичинде биз массив элементибиз менен каалаган операцияны аткара алабыз:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // элемент менен бир нерсе жасайбыз
		setNotes(copy);
	}
}

Сандардан турган массив берилген. Аны ul тизмеси түрүндө чыгарыңыз. Ар кандай liге чыкылдаганда анын санын квадратка көтөрүңүз.

Ар бир liтин аягында баскыч жасаңыз, баскычты басканда ал li тизмеден өчүрүлсүн.

Инпут берилген. Ар кандай liге чыкылдаганда бул liтин тексти инпутка түшсүн.

Мурунку тапшырманы өзгөртүңүз, инпут фокустан ажыраганда өзгөртүлгөн текст тиешелүү liге түшсүн.

Баскыч берилген. Баскычты басканда li тизмесинин тартибин тескерисинче которуп салыңыз.