Как не перезатирать вложенный объект в state?

Question

[GavrilovArtem]

В родительском компоненте есть инициализация state:

state = { 
  tasks: {},
  users: {
    userId: 1,
    userName: "Artem Gavrilov",    
  },
  appData: {
    selectedDate: new Date(),
    unfinished: {},
  }, 
};

Есть дочерний компонент с формой из текстовых инпутов:

export default class Form extends React.Component {
  handleTextChange = (e) => {
    e.preventDefault();
    const {name, value} = e.target;
    this.setState({...this.state, appData: {
      unfinished: {
        [name]: value,
        }
      }
    });
  }
  render() {
    return (
      <div className="task-container">
        <form className="task-form">
          <div className="task-line">
            <p className="task-p">Название задачи</p>
            <input onChange={this.handleTextChange} className="task-input" type="text" required name="taskName"/>
          </div>
          <div className="task-line">
            <p className="task-p">Описание задачи</p>
            <textarea onChange={this.handleTextChange} className="task-textarea" cols="20" rows="5" type="text" required name="taskDesc"/>
          </div>
        </form>
      </div>
    );
  }
}

Я хочу заполнять объект state.appData.unfinished текущими значениями из инпутов. Проблема в том, что при вводе символов во втором поле - state перезатирается и я теряю значение из первого (и наоборот). Если я записываю в state.[name], все работает корректно, но мне хочется работать с такой структурой состояния. Как перестать перезатирать состояние во вложенном объекте?

Answer 1

[0xD34F]

this.setState(({ appData }) => ({
  appData: {
    ...appData,
    unfinished: {
      ...appData.unfinished,
      [name]: value,
    },
  },
}));