Can't type in react Input Text Field - onChange not working properly

Question

I'm working with ReactJS and following a Tutorial to create a Login Page, in the example the code is very intuitive and generic, I'm trying to emulate the function to get the values from the email and password Inputs, but when I write the text is immediately replace with an empty String.

I already went through similar posts and found that the logic is more complex without be needing that. I would like to have something as simple as this DEMO.

I tried adding ids to different components to validate if it worked, I couldn't make it work.

This is the code:

class LoginLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
  onUserLogin() {
    if (this.state.email !== "" && this.state.password !== "") {
      this.props.loginUser(this.state, this.props.history);
    }
  }
  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }
  render() {
    return (
      <Fragment>
        <Form>
          <Label className="form-group has-float-label mb-4" id="inputEmail">
            <Input type="email"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </Label>
          <Label className="form-group has-float-label mb-4">
            <Input type="password" id="inputPassword"
              value={this.state.password}
              onChange={this.handleChange}
            />
          </Label>
          <div className="d-flex justify-content-between align-items-center">
            <NavLink to={`/forgot-password`}>
              <IntlMessages id="user.forgot-password-question" />
            </NavLink>
            <Button
              color="primary"
              className="btn-shadow"
              size="lg"
              onClick={() => this.onUserLogin()}
            >
              <IntlMessages id="user.login-button" />
            </Button>
          </div>
        </Form>
      </Fragment>
    );
  }
}
const mapStateToProps = ({ authUser }) => {
  const { user, loading } = authUser;
  return { user, loading };
};

export default connect(
  mapStateToProps,
  {
    loginUser
  }
)(LoginLayout);

Answer 1

Add an id property of value “email” to your email input and change id value “inputPassword” to just “password”.

This is so that [event.target.id] dynamic property key resolves values in your change handler matches the property names of “email” and “password” of your components state structure.

Otherwise currently, you are setting state of inputPassword instead of password, but pointing the inputs controlled value property to password which isn’t being updated because of the mismatch. Also, email doesn’t have a visible id property so that would evaluate as undefined in terms of event.target.id.

Hopefully that helps!