React JSX Expressions

⚛️ React JSX Expressions

JSX expressions allow you to embed JavaScript logic directly inside JSX.
Anything inside {} in JSX is treated as a JavaScript expression.

 Basic Syntax


 

export default App;

  • {name} is a JSX expression

  • It evaluates to the value of name and renders it

 Expressions Can Be Any JavaScript Expression

Examples:


 

Expressions in Attributes

You can use expressions in JSX attributes:

 Calling Functions in JSX

You can call JavaScript functions inside {}:


 

Conditional Rendering in Expressions

Using ternary:


 

Using logical AND:


 

Expressions in Loops (map())


 

❌ What You Cannot Do in JSX Expressions

  • Cannot use statements, only expressions
    ❌ if (true) { ... } → invalid
    ✔ Use ternary or logical operators instead

  • Cannot use for loops inside {}
    ✔ Use .map() instead

🎯 Summary

FeatureExample
Embed variable{name}
Arithmetic{a + b}
Conditional{isLoggedIn ? "Yes" : "No"}
Function call{formatName(user)}
Array mapping{numbers.map(n => <li>{n}</li>)}
Attribute expressions<div style={{ color: "red" }}>Text</div>

JSX expressions make React dynamic and interactive, letting you combine JavaScript logic and UI seamlessly.

You may also like...