How to implement a ternary into on-click handler

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>

Answers:

Answer

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>
Answer

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.