Привязка инпутов к массиву в 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>;
}