Conditional within a conditional

Question

I am trying to put a conditional statement within a conditional statement (something i thought was simple) in my code.

What is want is if weekState (boolean) is true, and bool is true, show the first jsx element. If weekState is true and bool is false, show the second jsx element. If weekState is false, return null. Semms pretty simple, but im obviously missing something.

       { weekState ?
           { bool ?
               <TableRow>
                   {take(weekListForAllAdvisorsOfState, 14)}
               </TableRow>
               :
               <TableRow>
                   {take(weekListForAllAdvisorsOfState, 7)}
               </TableRow> 
           }
            : null
       }

I have looked at this, and this which should have solved my issue, and makes me think theres a syntax error im not seeing.

The error im getting is

Is this the answer to your question? https://stackoverflow.com/questions/37312122/how-to-do-a-nested-if-else-statement-in-reactjs-jsx — zahra zamani, Feb 01 '21 at 13:37

score 1 · Accepted Answer · answered Feb 01 '21 at 13:33

There is a pair of unnecessary curly braces in the expression after ?. Either remove them, or change them for parentheses ():

{weekState ? (
  bool ? (
    <TableRow>{take(weekListForAllAdvisorsOfState, 14)}</TableRow>
  ) : (
    <TableRow>{take(weekListForAllAdvisorsOfState, 7)}</TableRow>
  )
) : null}

score 0 · Answer 2 · answered Feb 01 '21 at 13:29

I think adding a Fragment should fix this:

{ weekState ?
        <React.Fragment>
           { bool ?
               <TableRow>
                   {take(weekListForAllAdvisorsOfState, 14)}
               </TableRow>
               :
               <TableRow>
                   {take(weekListForAllAdvisorsOfState, 7)}
               </TableRow> 
           }
            
          </React.Fragment>
          : null
       }

Conditional within a conditional

2 Answers2