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;
    };
  })()} />;
7 Likes

I just want to confirm whether i am getting your code the right way !!
As far as I can assess you have made an arrow head function and used () to make it a function call !

2 Likes

Yes, I made an arrow function and called it with ().

2 Likes

Why do we need to wrap the function coinToss with square brackets?

const img = <img src={pics[coinToss() === ‘heads’ ? ‘kitty’ : ‘doggy’]} />;

It is not coinToss() which is wrapped in square brackets but the whole ternary/conditional expression which is

coinToss() === ‘heads’ ? ‘kitty’ : ‘doggy’

The above expression will finally evaluate to either ‘kitty’ or ‘doggy’ . On substituting the expression with values it will become

pics[‘kitty’]

or

pics[‘doggy’]

Now pics is an already defined object. The above expression will be getting values for respective keys.

3 Likes

Why do we use quotation marks in:
const img = <img src={pics[coinToss()===‘heads’ ? ‘kitty’ : ‘doggy’]} />;

for kitty and doggy since they are js variables?
wouldn’t img = be the result?

there is two way to access a value from an object

  1. dot notation
    eg:- pics.kitty
  2. square baracketing
    eg:- pics[‘kitty’}
    mostly second one is used for keys that having spaces so quotation mark is necessary
1 Like