CODEWITHSUNDEEP
reactjsreact-state
Davtho1983
Davtho1983

Reputation: 3954

React set button to disabled with state

I am in a React class-based component and a property on my state like so:

  state = {
    controls: {
      email: {
        validation: {
          required: true,
          isEmail: true
        },
        invalid: false,
      },
      password: {
        validation: {
          required: true,
          minLength: 6
        },
        invalid: true,
      },
      disabledSubmit: true,
    }
  };

I have an inputChangedHandler triggered from an input component:

  inputChangedHandler = (event, controlName) => {
    console.log("[STATE]", this.state.controls);
    const updatedControls = {
      ...this.state.controls,
      [controlName]: {
        ...this.state.controls[controlName],
        value: event.target.value,
        invalid: !this.checkValidity(
          event.target.value,
          this.state.controls[controlName].validation
        )
      },
      touched: true
    };

    console.log("[UPDATEDCONTROLS]", updatedControls);
    this.setState({ controls: updatedControls }, () => {
      this.disabledSubmitHandler();
    });
  };

And a disabledSubmitHandler that should be being called from within my inputChangedHandler :

  disabledSubmitHandler() {
    if (
      !this.state.controls["email"].invalid &&
      !this.state.controls["password"].invalid
    ) {
      this.setState(
        { disabledSubmit: true },
        console.log("[DISABLEDHANDLER] TRUE")
      );
    }
  }

The prop is set on my button component in my JSX like so:

<Button
                            value="submit"
                            clicked={this.submitHandler}
                            disabled={this.state.disabledSubmit}
                          />

This does not work, but I'm not sure what's happening?

Upvotes: 1

Views: 151

Answers (1)

Ted
Ted

Reputation: 14937

I think maybe this bit seems to need fixing:

disabledSubmitHandler() {
    if (
      !this.state.controls["email"].invalid && //if email is not invalid
      !this.state.controls["password"].invalid //if password is not invalid
    ) {
      this.setState(
        { disabledSubmit: true },
        console.log("[DISABLEDHANDLER] TRUE")
      );
    }
  }

That code says if the email and password are valid, disable the input. I think it should be:

disabledSubmitHandler() {
    if (
      !this.state.controls["email"].invalid &&
      !this.state.controls["password"].invalid
    ) {
      this.setState(
        { disabledSubmit: false },
        console.log("[DISABLEDHANDLER] FALSE")
      );
    }
  }

Plas as @an0nym0us mentioned, disabledSubmit is nested inside controls.

Also, on a side note, it seems a little odd that you would call a function which sets state, only to call another function which sets state inside that function, as a callback to set state (inputChangedHandler calling disabledSubmitHandler'). It seems you could call that disabled check from withininputChangedHandlerpassing it yourupdatedControls, and return true/false fordisabledSubmit, resulting in a single call tosetState`

Upvotes: 1

Related Questions