0

I'm following React's official document. I'm currently on this topic called conditional rendering, it doesn't explicitly state that one can't use if-else statement in JSX but I tried and found it doesn't work.

I wanted to know why so I Googled it and found some webpages that explains but most of them just say 'JSX is just syntactic sugar for function calls and object construction.'

I assume that it's because if-statement is a 'statement', not an 'expression' and JSX only takes expressions but not sure if I'm right.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
chozzaman
  • 13
  • 2
  • Yes, because it's not an expression. [_"Any JavaScript expression will work between curly braces"_](https://react.dev/learn/javascript-in-jsx-with-curly-braces), but _only_ expressions. When you think about what it's desugared back into it should be obvious why. Probable dupe: https://stackoverflow.com/q/60988649/3001761. – jonrsharpe Jul 11 '23 at 18:47
  • Correct. And the reason why is that expressions are statements that returns a value, Plain-old statements don't return anything. In javascript `if` is not an expression. This is not always true. In Tcl for example `if` returns a value because it is a function (the Tcl language does not have an `if` syntax instead it has an `if` function as part of its standard library) – slebetman Jul 11 '23 at 19:33

1 Answers1

0

You are correct in your assumption. In JSX, the reason why you can't use if statements directly is because JSX expects expressions, not statements. JSX is designed to represent the structure and composition of UI components using a syntax similar to HTML, but it ultimately gets transpiled into JavaScript function calls.

JSX expressions are meant to be evaluated and produce a value, whereas statements are executed to perform actions. The if statement in JavaScript is a statement because it doesn't produce a value directly. It is used to control the flow of execution based on a condition.

In JSX, you can achieve conditional rendering by using JavaScript expressions within curly braces {}. This allows you to use conditional operators, such as the ternary operator (condition ? expressionIfTrue : expressionIfFalse), logical operators (&& and ||), or by invoking functions that return JSX elements.

Example,

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in.</p>}
    </div>
  );
}

In this example, the expression

isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in.</p>

Is evaluated, and the resulting JSX element is rendered conditionally based on the value of the isLoggedIn prop.

By using expressions in JSX, you can achieve dynamic rendering and compose your UI components based on conditions and values. This approach allows for more flexibility and maintains the declarative nature of JSX.

Remember that JSX is just a syntax extension of JavaScript, and the expressions you use inside JSX are still subject to JavaScript rules and limitations.

Jeet Makwana
  • 55
  • 1
  • 3