how do Two different functions on a single onclick in reactjs Toggle button [duplicate]

Question

i have two different function

Deactivate = () => {
 //logic for deactivate
}

Activate = () => {
 //logic for activate
}


   return (
       <div>
          <Toggle
              defaultChecked={this.state.isChecked}
              className="switch-danger"
            />
       </div>
     )

first time click on toggle button when trigger the 'Deactivate function', then second time click trigger 'Activate button'.

onClick={() => this.state.isChecked ? this.Deactivate() : this.Activate()} — user5734311
– user5734311, Commented Jul 9, 2020 at 6:53
Do you hold the "activated" value in state to use a simple ternary in a callback handler? Would this be something better suited to a lifecycle function? Can you update your question to include complete code and what, if any, issues you have with what you're trying to do? — Drew Reese
– Drew Reese, Commented Jul 9, 2020 at 6:53
@DennisVash Not a dupe of that; OP is looking to call either A or B, not both at the same time. — user5734311
– user5734311, Commented Jul 9, 2020 at 6:58
@mplungjan Yeah, I guess the method of creating a separate function is close enough; just not sure it's obvious for everybody — user5734311
– user5734311, Commented Jul 9, 2020 at 7:07

Aurel Dodon · Accepted Answer · 2020-07-09 14:52:49Z

0

Firstly make Toggle as a controlled component and then if isChecked is true call Activate and false for Deactivate or vice-versa.

...
checkHandler = () => {
  this.setState((previousState) => {
    const isChecked = !previousState.isChecked

    isChecked ? this.activate() : this.deactivate()

    return { isChecked }
  })
}

deactivate = () => {
  //logic for deactivate
}

activate = () => {
  //logic for activate
}

render() {
  const { isChecked } = this.state

  return (
    <div>
      <Toggle
        className="switch-danger"
        value={isChecked}
        onChange={this.checkHandler}
      />
    </div>
  )
}

edited Jul 9, 2020 at 14:52

answered Jul 9, 2020 at 6:54

Aurel Dodon

761 silver badge4 bronze badges

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

2 Comments

benzene Over a year ago

please describe me using code

Aurel Dodon Over a year ago

@benzene check my edit

Collectives™ on Stack Overflow

how do Two different functions on a single onclick in reactjs Toggle button [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related