onClick conditional rendering for three conditions

Question

I have onClick that I want to hit a certain function depending on the following logic:

onClick={ approve && this.handleApproveClick, !approve && !releaseHold && this.handleDeclineClick, releaseHold && this.handleReleaseHoldClick }

Oddly enough the last this.handleReleaseHoldClick works, while the others do not. What is the correct way to do this? Or do I really need to create a separate button?

kind user · Accepted Answer · 2018-12-14 18:24:24Z

Why does only the last work?

It's a basic comma operator case, where the "comma operator evaluates each of its operands (from left to right) and returns the value of the last operand".

What is the correct way to do this?

Since it's a triple-condition function, I'd suggest you to create a class method and simply secure each of possible cases.

handleSomeClick = () => { if (approve) { this.handleApproveClick(); } else if (!approve && !releaseHold) { this.handleDeclineClick(); } else if (releaseHold) { this.handleReleaseHoldClick(); } }

and inside JSX:

onClick={this.handleSomeClick}

Collectives™ on Stack Overflow

onClick conditional rendering for three conditions

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related