How to use ternary operator within the jsx of a react component along with typescript?

user_12018720 0
Viewed 4579

I want to return null if condition meets and if not render a component using ternary operator in react and typescript.

What I am trying to do?

I have the code like below,

{condition1 && condition2 && (
    <firstdiv>
      <seconddiv>
        <Icon />
      </seconddiv>
    </firstdiv>
  )}

So as seen above if condition1 and condition2 is true then it renders firstdiv.

Now I have to return null if condition3 is true.

So in easy if and else something like this,

if (condition1 && condition2) {
    if (condition3) { 
        return null;
    } else {
        return firstdiv;
    }
}

So to do that I tried something like below with ternary operator in jsx

{conditon1 && condition2 && (
    {condition3 ? return null : (
    <firstdiv>
      <seconddiv>
        <Icon/>
      </seconddiv>
    </firstdiv>)
  })}

But this doesn't seem to be correct syntax. Could someone help me fix this? Thanks.

typescript reactjs javascript
5 Answers

You wrapped your ternary into {} where it's neither allowed nor necessary. Also you can't use the return statement inside of an expression.

{conditon1 && condition2 && (
    condition3 ? null : (
        <firstdiv>
            <seconddiv>
                <Icon/>
            </seconddiv>
        </firstdiv>
    )
)}
user_50051770

You could do this:

{conditon1 && condition2 && (
    {!condition3 && (
    <firstdiv>
      <seconddiv>
        <Icon/>
      </seconddiv>
    </firstdiv>)
  })}

Or even simpler:

{
  conditon1 && condition2 && !condition3 && (
    <firstdiv>
      <seconddiv>
        <Icon />
      </seconddiv>
    </firstdiv>
  );
}
user_106008710

Other answers are correct but fail to explain the reasoning.

  1. Within JSX, {} braces must contain a Javascript expression

An expression, if you're not familiar with the term, is any unit of code that can be evaluated to a value is an expression. Think anything that gives you can type in REPL and see a value for.

Why your attempts work or fail

So your first statement form works, 

{
  condition1 && condition2 && (<p>some JSX<p>)
}

This works; it's an expression.

if (condition1 && condition2) {
    if (condition3) { 
        return null;
    } else {
        return firstdiv;
    }
}

Doesn't work! Not an expression. You could use this to set a variable at the beginning of your render() function and render the variable later, though.

{conditon1 && condition2 && (
    {condition3 ? return null : (
    <firstdiv>
      <seconddiv>
        <Icon/>
      </seconddiv>
    </firstdiv>)
  })}

This is nearly an expression, but not quite. Why is there a { beside condition3? You are already in Javascript evaluation mode, so this technically starts a code block. But a code block can't be part of an expression, so this is no longer an expression, and so won't work.

Solutions

No ternary

You could use the same form without a ternary like this

{
  (
    condition1 
    && condition2 
    && !condition3
    && (<p>firstdiv<p>)
  ) || null
}

But in fact there's no reason to ever explicitly return null in JSX (why? it won't be rendered), so this can be simplified to:

{
  condition1 
  && condition2 
  && !condition3
  && (<p>firstdiv<p>)
}

Ternary

That being said, we can still use ternary for condition3.

{
  conditon1 
  && condition2 
  && (
    //{ problem was here. You're already in a Javascript context!
    //  { would start a code block here, which you can't do in an expression
    condition3 
    ? return null 
    : (
      <firstdiv>
        <seconddiv>
         <Icon/>
        </seconddiv>
      </firstdiv>
    )
  )
}
user_6757210

First of all your logic can be more simple like that: 

if (condition1 && conditions && !condition3) {
 return firstdiv;
} else {
 return null;
}

{conditon1 && condition2 && !condition3 ? <firstdiv>
      <seconddiv>
        <Icon/>
      </seconddiv>
    </firstdiv> : null }
user_76048000

Place your condition in curly braces since your using JSX, the inside curcly braces, think of you have 3 parameters in your ternary operator, the condition followed by a question mark which stands as the IF is JS, the second and third will be execution if true or false separated by a cologn, which going to look lile this { ( condition1 && condition 2 ) ? firstdiv : null }

user_150897140
Related