Поврзување на инпути со низа во 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]

Прикажете го на екранот аритметичката средина на елементите од оваа низа. Во циклус направете инпути за уредување на елементите.