How to implement a ternary into on-click handler

Question

Been working on this all morning and just can't seem to figure out what's wrong with this ternary expression. No errors are being recorded, but the first part of the expression never evaluates. Any ideas?

<a className="buy-proposals-credits" onClick={userPaywallStatus === PAYWALL_STATUS_WAITING 
            ? () => openModal(PAYWALL_MODAL)
            : () => openModal(PROPOSAL_CREDITS_MODAL)}>(Manage proposal credits)</a>

Henry Woody · Answer 1 · 2018-11-30T21:39:10.600

5

The condition in the ternary operator is evaluated when your app mounts, not each time that render is called, so since userPaywallStatus === PAYWALL_STATUS_WAITING is initially false the whole expression just becomes () => openModal(PROPOSAL_CREDITS_MODAL)}>(Manage proposal credits).

To fix this you need to wrap the condition in a function as well so that it is evaluated when onClick is called, like this:

<a className="buy-proposals-credits"
    onClick={
        () => userPaywallStatus === PAYWALL_STATUS_WAITING
            ? openModal(PAYWALL_MODAL)
            : openModal(PROPOSAL_CREDITS_MODAL)
    }
>
    (Manage proposal credits)
</a>

edited Nov 30 '18 at 21:39

answered Sep 21 '18 at 16:15

Henry Woody

14,024
7
39
56

Thank you so much. I completed missed the fact that when I wrote the ternary I removed the actual function wrapping. Unfortunately though, the code above still doesn't work. Seem to be on the right track though – Kevin Hebert Sep 21 '18 at 16:26
@KevinHebert are you getting an error message? if so what does it say? otherwise what's happening? – Henry Woody Sep 21 '18 at 16:28
@KevinHebert can you share the code of userPaywallStatus and openModal as well? – Hemadri Dasari Sep 21 '18 at 16:31
@HenryWoody No errors; just same activity as before actually. It seems to always evaluate false and just runs the second half of the ternary. – Kevin Hebert Sep 21 '18 at 16:33
1

Figured it out guys. had to do with my connector not recognizing userPaywallStatus. Thanks again for all the help. – Kevin Hebert Sep 21 '18 at 16:38
Ideally, this should have been a private function that would access state and internally call necessary function. This would help you keep your markup clean and keep business logic centered – Rajesh Sep 21 '18 at 17:28

score 2 · Answer 2 · answered Sep 21 '18 at 16:14

2

You can create arrow function with ternary:

<a className="buy-proposals-credits" onClick={() => userPaywallStatus === PAYWALL_STATUS_WAITING 
        ? openModal(PAYWALL_MODAL)
        : openModal(PROPOSAL_CREDITS_MODAL)}>(Manage proposal credits)</a>

answered Sep 21 '18 at 16:14

Eduardo dos S Barbieri

136
1
7

How to implement a ternary into on-click handler

2 Answers2