this.setState in handleSubmit function not resetting form inputs

Question

I want to reset/clear my form after it has been submitted but am not able to setState inside my handleSubmit function. The inputs do not clear.

I have noticed that for some reason logging "this.state" logs the controlled inputs correctly, but logging "this" and then looking at the state object in the console shows it to be empty. So it appears that the state object inside "this" and "this.state" are different and I don't understand why.So I feel like this must be part of the problem.

I learned that setState is async, but I have seen other similar code that seems to work. To test the code I am literally just trying to setState inside the handleSubmit function.

import React, { Component } from "react";
import { connect } from "react-redux";
import { signIn } from "../../store/actions/authActions";

class SignIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
    //this.handleSubmit = this.handleSubmit.bind(this); Don't need this..
  }

  handleChange = e => {
    console.log(this.state);
    this.setState({
      [e.target.id]: e.target.value
    });
    console.log("handleChange this.state", this.state);
    //LOGS handleChange this.state {email: "[email protected]", password: "as"}
    console.log("handleChange this", this);
    //LOGS handleChange this SignIn {props: {…}, context: {…}, refs: {…}, updater: {…}, handleChange: ƒ, …}
    //                --> inside this object, state: email: "", password: ""
  };

  handleSubmit = e => {
    e.preventDefault();
    console.log("Before this.setState handleSubmit this.state", this.state); 
    //LOGS Before this.setState handleSubmit this.state {email: "[email protected]", password: "asdf"}
    console.log("Before this.setState handleSubmit this", this);
    //LOGS Before this.setState handleSubmit this SignIn {props: {…}, context: {…}, refs: {…}, updater: {…}, handleChange: ƒ, …}
    //                --> inside this object, state: email: "", password: ""

    // this.props.signIn(this.state);
    const newState = {
      email: "",
      password: ""
    };
    this.setState(newState, () => {
      console.log("Set state was called");
    });

    console.log("After this.setState handleSubmit this.state", this.state);
    // LOGS After this.setState handleSubmit this.state {email: "[email protected]", password: "asdf"}
    console.log("After this.setState handleSubmit this", this);
    //LOGS After this.setState handleSubmit this SignIn {props: {…}, context: {…}, refs: {…}, updater: {…}, handleChange: ƒ, …}
    //                --> inside this object, state: email: "", password: ""

  };

  render() {
    const { authError } = this.props;
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
          <h5 className="grey-text text-darken-3">Sign In</h5>
          <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" onChange={this.handleChange} id="email" />
          </div>
          <div className="input-field">
            <label htmlFor="password">Password</label>
            <input type="password" onChange={this.handleChange} id="password" />
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1">Login</button>
          </div>
          <div className="red-text center">
            {authError ? <p>{authError}</p> : null}
          </div>
        </form>
      </div>
    );
  }
}
const mapDispatchToProps = dispatch => {
  return {
    signIn: creds => {
      dispatch(signIn(creds));
    }
  };
};

const mapStateToProps = state => {
  return {
    authError: state.auth.authError
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignIn);

Answer 1

Try binding your fields to the state properties using the value attribute in each of them.

Email input would look like this:

<input type="email" onChange={this.handleChange} id="email" />

And password input would look like this:

<input type="password" onChange={this.handleChange} value={this.state.password} id="password" />