Ternary Operator in React/JSX Not Working

Question

I'm mapping data from an eBay API pull, and trying to display an icon if the value equals true or nothing if false.

The field is called bestOfferEnabled and is either a value of 'true' or false.

I'm trying this:

{item.listingInfo[0].bestOfferEnabled === true && (
            <i className="fas fa-comment-dollar"></i>
          )}

and it is not generating the icon. I've also tried various versions of this including true in quotes but nothing is working.

When i just try to output the text on the page doing this:

{item.listingInfo[0].bestOfferEnabled}

it does print out a true or false value

Jay Kariesch · Accepted Answer · 2019-10-15T01:01:57.713

2

This is because bestOfferEnabled is a key for an array:

listingInfo: [{
    bestOfferEnabled: [
        "false"
    ],
}]

So you'd have to do this:

{item.listingInfo[0].bestOfferEnabled[0] === true && (
            <i className="fas fa-comment-dollar"></i>
)}

You could also use the every Array method to ensure all values in the array are true:

{item.listingInfo[0].bestOfferEnabled.every(key => key) && (
            <i className="fas fa-comment-dollar"></i>
)}

EDIT: As someone pointed out, your boolean values are strings, in which case you can use JSON.parse to convert them.

{item.listingInfo[0].bestOfferEnabled.every(key => JSON.parse(key)) && (
            <i className="fas fa-comment-dollar"></i>
)}

That should do the trick.

edited Oct 15 '19 at 01:01

answered Oct 15 '19 at 00:44

Jay Kariesch

awesome Jay that works! thanks! one thing, i'm still new on this stuff, but is there a reason that we don't need some sort of condition on the such as `key = >key === 'true'` or is it just that the truthy condition is embedded already. hope this question makes sense – John Rogerson Oct 15 '19 at 21:54
Good question! If the callback in "every" returns any value that can be truthy -- basically anything that !! (not-not) would evaluate to true -- it will evaluate to true. Therefore in key => key, if key equals anything that is not falsey, like a non-empty string, it will return true without requiring a condition. If it is a falsey value like 0, false, etc, it'll return false. – Jay Kariesch Oct 15 '19 at 22:17
ah ok, makes perfect sense now, thanks for the explanation! – John Rogerson Oct 16 '19 at 00:40

1 Answers1