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

Выведите на экран среднее арифметическое элементов этого массива. В цикле сделайте инпуты для редактирования элементов.

←→
↑