'if () {} else {}' statement in React JSX?

Question

I am simply trying to use an if/else statement in React in some JSX, but I get a "Parsing error: Unexpected token". The example ternary statement seems to work fine. Can you not use if/else statements in JSX?

  ./src/App.js
  Line 288:  Parsing error: Unexpected token

  286 |                   { this.getInvitesForEvent(dat.id, 
  this.invitesForEventData) }
  287 |                   { true === 1 ? 'empty set' : 'has results' }
> 288 |                   { if (true) { true } else { false } }
  |                         ^
  289 |                 </div>
  290 |               ))
  291 |           }

You can't use statements inside JSX, only expressions. It's quite common to use ternary operator in JSX — Dan Starns
– Dan Starns, Commented Sep 27, 2019 at 15:51

Nicholas Tower · Accepted Answer · 2019-09-27 15:54:01Z

3

You can't do that inside the jsx, because only expressions can be put in jsx, not statements. If a ternary expression is inconvenient or illegible, you could consider doing an if statement outside the jsx

let val;
if (/*whatever*/) {
  val = true;
else {
  val = false;
}

return (
  <div>
    {val}
  </div>
)

As for why there's this limitation, it might help to remember what the jsx gets transpiled into. Doing <div>Hello</div> turns into React.createElement("div", null, "Hello");, and doing <div>{true ? 'true' : 'false'}</div> turns into React.createElement("div", null, true ? 'true' : 'false');

So what would <div>{if (true) { 'true' } else { 'false ' }}</div> transpile into? Something like React.createElement("div", null, if (true) { 'true' } else { 'false ' });, but it's illegal to put an if statement in the middle of that code. So it's also illegal to put it in the middle of the jsx.

edited Sep 27, 2019 at 15:54

answered Sep 27, 2019 at 15:43

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

Comments

Raphael Morgan · Accepted Answer · 2021-02-23 02:00:19Z

0

to use if/else in jsx, you can do {condition ? results : results if condition isn't met} for example if you wanted to render the home page if someone was logged in but the login page if they weren't, you would do:

{ loggedIn ? <Home /> : <Login /> }

the "condition/variable ?" acts as a "if condition/variable" and the ":" acts as an else.

answered Feb 23, 2021 at 2:00

Raphael Morgan

2101 silver badge19 bronze badges

Collectives™ on Stack Overflow

'if () {} else {}' statement in React JSX?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related