React-и як манбаи ҳақиқат

Барои ҳар гуна додаҳои тағйирёбанда дар барномаи React бояд як манбаи ҳақиқат мавҷуд бошад. Ин ибора маънои онро дорад, ки агар шумо ду ҳолат (стейт) дошта бошед ва яке аз онҳо тавассути дигараш ҳисоб карда шавад - яке аз ҳолатҳои зиёд аст ва бояд тоза карда шавад.

Биёед инро бо мисол муҳокима кунем. Фарз кунем, ки шумо, масалан, ду вуруд (инпут) доред: дар якум ҳарорат ба дараҷаи Фаренгейт ворид карда мешавад, дар дуввум - ба дараҷаи Цельсий. Дар ҳоле ки мо мехоҳем, ки ҳарду вуруд ҳамоҳанг карда шаванд: вақте ки ҳарорат ба як вуруд ворид карда мешавад, он бояд ба таври мувофиқ дар дуввум тағйир ёбад.

Равиши нодуруст ворид кардани ду ҳолат хоҳад буд: яке барои ҳарорат ба Фаренгейт, ва дигаре - ба Цельсий. Чаро дуруст нест: зеро як ҳарорат аз дигараш ҳисоб карда мешавад, пас ҳамчун ҷойи нигоҳдории додаҳо як ҳолат бояд мавҷуд бошад.

Татбиқи вазифаи тавсифшударо нависед.

Як барномасоз коди зеринро навишт, ки ҷамъи унсурҳои массивро чоп мекунад:

function getSum(arr) {
	let res = 0;
	
	for (let elem of arr) {
		res += +elem;
	}
	
	return res;
}

function Calculator() {
	const [value, setValue] = useState('');
	const [nums, setNums] = useState([1, 2, 3]);
	const [sum, setSum] = useState(6); // ҷамъи унсурҳои массиви nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // элементро ба массив илова мекунем
		setSum(getSum([...nums, event.target.value])); // ҷамъро аз нав ҳисоб мекунем
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Ин код чӣ гап дорад? Онро ислоҳ кунед.

Як барномасоз код барои таҳрир кардани унсурҳои массив навишт:

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	const [editNum, setEditNum] = useState(null);
	const [value, setValue] = useState('');
	
	const result = notes.map((note, index) => {
		return <p key={index} onClick={() => startEdit(index)}>
			{note}
		</p>;
	});
	
	function startEdit(index) {
		setEditNum(index);
		setValue(notes[index]); // матни унсури таҳриршавандаро ба ҳолати ҷудогона менависем
	}
	
	function changeItem(event) {
		setValue(event.target.value);
		setNotes([...notes.slice(0, editNum), event.target.value,...notes.slice(editNum + 1)]);
	}
	
	return <div>
		{result}
		<input value={value} onChange={changeItem} />
	</div>;
}

Ин код чӣ гап дорад? Онро ислоҳ кунед.