[Leonid_ts]

Изучаю реакт неделю и столкнулся со следующей проблемой (ссылка на CodePen).

Есть два инпута - имейл и пароль. В них есть один обработчик осбытия onChange. В нем при каждом изменении value происходит обновление стейта компонента. И проблема заключается в том, что если обновлять стейт через функцию

handleChange = (e) => {
    this.setState(state => ({
      ...state,
      [e.target.type]: e.target.value,
    }));
 }

то, почему-то появляется ошибка "Cannot read property 'type' of null". Т.е. объект события передается с пустыми свойствами.

Однакому если деструктуризовать объект события, то всё работает

const { target } = { ...e };

this.setState(state => ({
  ...state,
  [target.type]: target.value,
}));

или так

const { target } = { ...e };
const { type } = target;
const { value } = target;

this.setState(state => ({
  ...state,
  [type]: value,
}));

Если менять стейт не в функциональном стиле, то объект события имеет правильные свойства

this.setState({
    ...this.state,
    [e.target.type]: e.target.value,
});

Вопрос: почему без структуризации, функция которая обновляет стейт получает объект события с пустыми полями. Деструтурированный объект traget (и его деструктурированные свойства) и объект e находятся же в одной области видимости. Что я упускаю?

Если можете распишите, пожалуйста, максимально подробно. Я только учусь и могу не знать очевидные для опытных программитов вещей.