Передача значения input в родительский компонент, React

Question

Не получается передать значение input в родительский компонент App.js, e.target.value - не работает. Как исправить ситуацию? id передается без проблем.

P.S. Только начинаю изучать React.

App.js

import React from 'react';
import List from './components/List.js';

let [employees, setEmployees] = React.useState([
    {id: 1, name: 'Name1'},
    {id: 2, name: 'Name2'}
]);

function changeInput(id,value) {
   setEmployees(
    employees = employees.map(employee => {
        if(employee.id === id){
            employee.name = value;
        }
    }));
}

export default function (props) {
    return(
        <div>
            <List employees={employees} onChange={changeInput}/>
        </div>
    );
}

List.js

import React from 'react';
import Item from './Item.js';

export default function (props) {
    return(
        <div>
            <ul>
                {props.employees.map((employee,index) =>{
                return <Item employee={employee} key={employee.id} index={index} onChange={props.onChange}/>
                })}
            </ul>
        </div>
    );
}

Item.js

import React from 'react';

export default function Item({employee, index, onChange}) {
    return(
        <li>
            <label><b>{index+1}</b></label>
            <input value={employee.name} onChange={(e)=>onChange(employee.id, e.target.value)}/>
        </li>
    );
}

Answer 1

Функция changeInput не возвращает данные. Она просто создает пустой новый массив. Что нужно:

Вернуть в массив объект с обновленными данными;
Вернуть в массив объекты, которые не менялись.

Как пример использования:

Короткий вариант, с использованием spread оператора:

setEmployees(
  employees.map(item => item.id === id ? {...item, name : value} : item )
)

Тот же вариант, но развернутый:

setEmployees(
    employees.map(item => {
        if( item.id === id) { //Если есть соответствие - возвращаем обновленный объект 
            return {
                ...item,
                name: value
            }
        }
        return item; //возвращаем старые объекты
        })
    )

Через Object.assign():

setEmployees(
  employees.map((item) => {
    if (item.id === id) {
      return Object.assign(item, item.name = value);
    }
    return item;
  })
);

БЛОГ НА HUSL

Передача значения input в родительский компонент, React

Ответы (1 шт):