CODEWITHSUNDEEP
javascriptreactjsstate
Angela Inniss
Angela Inniss

Reputation: 359

setState updates state however callback function as second argument will not execute

I am changing the logic of my sign in feature. I have one button that is to signUp and one to signIn. signUp works but signIn does not and I am not sure why when they both lead to the same function which kicks off an api request to log the user in.

state:

state = {
    controls: {
      email: {
        elementType: "input-email",
        elementConfig: {
          type: "email",
          placeholder: "Email Address"
        },
        value: localStorage.getItem("email") || "",
        validation: {
          required: true, // must not be empty
          isEmail: true
        },
        valid: false,
        touched: false
      },
      password: {
        elementType: "input",
        elementConfig: {
          type: "password",
          placeholder: "Password"
        },
        value: "",
        validation: {
          required: true,
          minLength: 6
        },
        valid: false,
        touched: false
      }
    },
    isSignUp: true,
    rememberMe: false
  };

Sign in form code with two buttons:


 return (
      <div className={classes.Auth}>
        {isLoggedIn}
        {errorMessage}
        <p className={classes.signUp}>Sign up to create a burger</p>
        <form onSubmit={this.handleSubmit}>
          {form}
          <Button btnType="Success">SIGN UP </Button>
        </form>
        <p className={classes.subText}>
          Already have an account? Switch to sign in below:
        </p>
        <Button clicked={this.signInHandler} btnType="Danger">
          SIGN IN
        </Button>
      </div>
    );

Handlers for both buttons:

Signup handler (this works):

  handleSubmit = event => {
    this.props.onAuth(
      this.state.controls.email.value,
      this.state.controls.password.value,
      this.state.isSignUp
    );
    event.preventDefault();
  };

SignIn handler which then calls handleSubmit also: 

 signInHandler = () => {
    this.setState(
      { isSignUp: false }, // should be false to kick off the api for the SignIn
      () => {                        // callback
        this.handleSubmit(); // calls the method above which signs user in 
      }
    );
  };

I followed this stackoverflow thread to write this part: setState doesn't update the state immediately

This is the error I get when I click the SIGN IN button 

TypeError: Cannot read property 'preventDefault' of undefined

Any ideas why?

Upvotes: 0

Views: 48

Answers (2)

Hagai Harari
Hagai Harari

Reputation: 2877

You are calling handleSubmit = event =>, but not sending the event to handle submit, add it to the flow

 <Button clicked={e=>this.signInHandler(e)} ... />



 signInHandler = e => {
    this.setState(
      { isSignUp: false }, // should be false to kick off the api for the SignIn
      () => {                        // callback
        this.handleSubmit(e); // calls the method above which signs user in 
      }
    );
  };

Upvotes: 1

Robin Zigmond
Robin Zigmond

Reputation: 18249

You're missing the event argument. This should work:

signInHandler = (e) => {
   this.setState(
     { isSignUp: false }, // should be false to kick off the API for the SignIn
     () => {                        // callback
       this.handleSubmit(e); // calls the method above which signs user in 
     }
   );
 };

Upvotes: 1

Related Questions