Why can I use a ternary operator inside a JSX expression but not an if statement?

Question

Why can I use a ternary operator inside a JSX expression but not an if statement?

Answer

We can use a ternary operator, also known as a conditional operator, inside a JSX expression because it will always evaluate to a value, where as an if/else/else if statement is not only not an expression (it’s a statement and will execute a statement based on the value of an expression), but will also not evaluate to a value.

In other words, we cannot use a statement where a value (or expression) is expected and for this reason, we cannot use statements, including the conditional if/else/else if statements, inside a JSX expression.

13 Likes

If we really want to use an if statement inside a JSX expression, I think there is a way that we rewrite it as a function which always returns a value, and call it immediately. I tried the following code and this worked too:

const img = <img src={(
  () => {
    if (coinToss() === 'heads') {
      return pics.kitty;
    } else {
      return pics.doggy;
    };
  })()} />;