Ռեակտիվ օպերացիաներ զանգվածների վրա 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-ը կ հեռացվի ցանկից:

Տրված է input: Կտտացնելով ցանկացած li-ի վրա՝ արեք այնպես, որ այդ li-ի տեքստը հայտնվի input-ում:

Փոփոխեք նախորդ առաջադրանքը այնպես, որ input-ի ֆոկուսը կորցնելու դեպքում փոփոխված տեքստը հայտնվի համապատասխան li-ում:

Տրված է կոճակ: Կտտացնելով այս կոճակի վրա՝ հակադարձեք li-երի հերթականությունը հակառակ: