Why in the LoginForm we need the (expensive?) `onChange` method?

Can I ask you why in the LoginForm.js we need the onChange method and why we can't get data from the form onSubmit?

I think it's really expensive to update the state everytime a user change an input, isn't it?

https://github.com/Remchi/bookworm-react/blob/master/src/components/forms/LoginForm.js#L17-L20

Can't we do something like this instead?

onSubmit = e => {
    this.setState({
      data: { email: document.getElementById("email").value, password: document.getElementById("password").value }
    });
}

Maybe something more beautiful...?

[Limoer96]

I think the React design concept tell us do not directly manipulate the DOM, and you should know more about controlled component, see in https://reactjs.org/docs/forms.html#controlled-components

Perhaps this may clarify a bit of healthy doubts: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/