passing multiple functions as callback in setState

Question

I have a react application, where I'm using a handler the set the state, for some input forms

<div class="form-group has-danger">


 <label class="form-control-label" for="inputDanger1">Username</label>
  <input type="text" name="username" value={this.state.username} onChange={this.onChange} className={this.state.isUsernameCorrect ? "form-control is-valid" :"form-control is-invalid"} id="inputInvalid" />
  {this.state.isUsernameCorrect ? <div class="valid-feedback">Username is acceptable!</div> :
  <div class="invalid-feedback">Please enter a valid username</div> }
</div>

<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Password</label>
  <input type="password" name="password" value={this.state.password} onChange={this.onChange} className={this.state.isUsernameCorrect ? "form-control is-valid" :"form-control is-invalid"} id="inputInvalid" />
  {this.state.isPasswordCorrect ? <div class="valid-feedback">password is acceptable!</div> :
  <div class="invalid-feedback">Please enter a valid password</div> }
</div>

with a respective handler

onChange = (e) =>{
    const name = e.target.name;
    const value = e.target.value;
    this.setState(
      {[name] : value
      },

  () => this.usernameValidator(this.state.username),
  () => this.passwordValidator(this.state.password)


  );
 }

I want to pass two separate functions, which validates the username and password with a regex pattern. Furthermore, it controls the state, of the display messages, if the password/username is correct or not.

However I want to execute both functions (and more maybe, for adding more form data), but setSatet only accepts one callback?

kind user · Accepted Answer · 2018-12-14 23:29:23Z

9

setState callback accepts only one function, but inside you can pass as many functions as you like.

this.setState({ [name] : value },
   () => {
      this.usernameValidator(this.state.username);
      this.passwordValidator(this.state.password);
   }
);

answered Dec 14, 2018 at 23:29

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

passing multiple functions as callback in setState

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related