Multiple ternary operators inside a single .map() in React JS

Question

I'm mapping data from an array and I want to display them only if they have a value different from null.
I have multiple objects in this array (power, accuracy, pp, ...) and I'm doing a ternary operator for every object.
Here's my code (which works fine) :

{move?.past_values?.map((mp) => 
  mp?.power !== null ? (
    <li>Before {mp?.version_group?.name} : {mp?.power}</li>
  ) : (
    null
  )
)}

When I try to do that :

mp?.power !== null ? (
    <li>Before {mp?.version_group?.name} : {mp?.power}</li>
  ) : (
    null
  )
mp?.accuracy !== null ? (
    <li>Before {mp?.version_group?.name} : {mp?.accuracy}</li>
  ) : (
    null
  )

it says that I should put "," after last parenthesis of the first ternary operator.
The problem is that I need to remap the whole array for the second ternary operator because "mp" becomes undefined.

Is there a way to have multiple ternary operators inside a single map function or do I have the map the array every time ?

to better understand your question: are you saying if mp?.power is null then evaluate mp?.accuracy? or are you saying if mp?.power is null or not evaluate mp?.accuracy? — knicholas
– knicholas, Commented Feb 3, 2022 at 18:45

Evren · Accepted Answer · 2022-02-03 18:41:48Z

2

If you refactor it in this way it should work and it is cleaner way of doing conditional rendering in react

 {move?.past_values?.map((mp) => 
        <>
            {mp?.power !== null && 
            <li>Before {mp?.version_group?.name} : {mp?.power}</li>}

            {mp?.accuracy !== null && 
            <li>Before {mp?.version_group?.name} : {mp?.accuracy}</li>} )
        </>
    }

answered Feb 3, 2022 at 18:41

Evren

4,4601 gold badge13 silver badges20 bronze badges

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

8 Comments

user17817501 Over a year ago

Where do I put it ? Inside the map and I delete the ":(null)" or instead of the li ? So, with this method, I only need to do one mapping ?

Evren Over a year ago

Yes you need just one mapping if you are taking both data from move?.past_values. You can use directly this and it should work

user17817501 Over a year ago

It's still expecting a "," after the first operator

Evren Over a year ago

Can you share your code with codesandbox then I can see what's wrong

user17817501 Over a year ago

I found the problem. I just forgot to wrap these inside a div. Thx for the help and for taking your time to help me find a solution :)

|

Collectives™ on Stack Overflow

Multiple ternary operators inside a single .map() in React JS

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related