Свързване на инпутни полета към масив в React

Нека в състоянието notes се съхранява масив:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		
	</div>;
}

Нека имаме и помощна функция, която намира сумата на елементите на масива:

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

function App() {
	...
}

Нека намерим и изведем сумата на елементите на нашия масив от състоянието, като използваме нашата помощна функция:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		{getSum(notes)}
	</div>;
}

Нека сега направим три инпутни полета и в value на всяко поле запишем един от елементите на масива:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		<input value={notes[0]} />
		<input value={notes[1]} />
		<input value={notes[2]} />
		
		{getSum(notes)}
	</div>;
}

Нека сега добавим събитие onChange на нашите инпутни полета. При това ще направим една обща функция-обработчик на това събитие:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// обща функция-обработчик
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

Както виждате, функцията changeHandler приема като първи параметър номера на този елемент от масива, който се редактира от даденото инпутно поле.

По този номер можем да заменим елемента от масива със съдържанието на инпутното поле.

Нека направим това:

function changeHandler(index, event) {
	setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
}

Сега ще можем да редактираме което и да е инпутно поле, като при това реактивно ще се променя масивът и съответно ще се преизчислява сумата на неговите елементи.

Нека съберем целия код заедно:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

Може да се направи така, че инпутните полета да се формират в цикъл:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	const result = notes.map((note, index) => {
		return <input
			key={index}
			value={note}
			onChange={event => changeHandler(index, event)}
		/>;
	});
	
	return <div>
		{result}
		{getSum(notes)}
	</div>;
}

Даден е следният масив:

[1, 2, 3, 4, 5, 6, 7, 8, 9]

Изведете на екрана средноаритметичното на елементите на този масив. В цикъл направете инпутни полета за редактиране на елементите.