რეაქტული ოპერაციები მასივებზე 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-ების რიგი უკუღმა.