Как получить данные из инпутов в JSX?
Делаю тестовое задание в react и redux, добавление и удаление сущностей сделал, осталось редактирование. Вопрос в том, что данные из инпутов передаются как-то странно. То есть первый элемент массива передаётся нормально, name, age, index отправляются в reducer, который изменяет state. Все последующие элементы по пути теряют свойства name, age при этом свойства index, type передаются в reducer нормально. Не смотрите на то что я в dispatch передаю тупо объект, это я переделаю когда функционал будет в порядке.
REDUCER
case 'EDIT_ITEM':
console.log(action.name, action.age, action.id);
return state.map((item, index) =>
action.id === index
? {
name: action.name,
age: action.age
}
: item
);
APP.JS
function EditUsers() {
const listItems = users.map(function (value, index) {
return (
<form>
<div className="input-group">
<div className="input-group-prepend">
<span className="input-group-text">{value.name}, {value.age}</span>
</div>
<input type="text" placeholder="New name" id="newName" className="form-control"/>
<input type="text" placeholder="New age" id="newAge" className="form-control" aria-describedby="button-addon2"/>
<div className="input-group-append">
<button onClick={() => dispatch({
type: 'EDIT_ITEM',
id: index,
name: document.getElementById('newName').value,
age: document.getElementById("newAge").value
})}
className="btn btn-outline-primary"
type="button"
id="button-addon2">
Изменить
</button>
</div>
</div>
</form>
)
});
return (
<div>{listItems}</div>
)
}