React JSX If Statements
⚛️ React JSX If Statements (Conditional Rendering)
In React, you cannot write plain if statements inside JSX like this:
Instead, React provides several ways to handle conditions.
1. Using Ternary Operator (Most Common)
Syntax:
condition ? trueExpression : falseExpressionWorks perfectly for inline JSX.
2. Using Logical AND (&&) Operator
Good for rendering something only if a condition is true.
If
showMessageisfalse, nothing is rendered.Short and clean for optional content.
3. Using If Statements Outside JSX
You can use regular if statements before the return statement.
Useful for more complex conditions or multiple branches.
4. Using Immediately Invoked Function Expression (IIFE) (Advanced)
Rarely used, but possible for inline complex logic.
5. Conditional Rendering Multiple Elements
Can render multiple JSX elements using fragments
<> </>.
⚡ Summary
| Method | Use Case | Syntax |
|---|---|---|
| Ternary Operator | Simple inline if-else | condition ? expr1 : expr2 |
| Logical AND | Render if true only | condition && expr |
| If statement outside JSX | Complex logic | let msg; if(...) { msg = ... } |
| IIFE | Inline complex logic | {(() => { if(...) return ... })()} |
Conditional rendering is essential in React for building dynamic UIs that respond to state or props.
