Реактивные амалиётҳо дар массиваҳо дар 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-ҳоро баръакс кунед.