React Expressions are one of the core features that make JSX powerful. They allow you to embed dynamic values, logic, and JavaScript computations directly inside your UI markup.
Whenever you see something inside { curly braces } in JSX, that’s a React Expression.
1. What is a React Expression?
A React Expression is any valid JavaScript expression written inside curly braces {} within JSX.
It tells React:
“Evaluate this JavaScript and insert the result right here in the UI.”
Example:
const name = "Luke";
function App() {
return <h1>Hello, {name}!</h1>;
}
React evaluates {name} and renders:
Hello, Luke!
2. What Can You Put Inside React Expressions?
React allows any JavaScript expression, meaning anything that returns a value.
✔ Allowed:
- Variables
- Function calls
- Math operations
- Ternary conditions
- Template literals
- Arrays
- JSX components
- Objects (not directly rendered, but can be used)
❌ NOT Allowed:
- Statements (e.g.
if,for,switch) - Function definitions
- Class declarations
React Expressions require expressions, not full statements.
3. Using Variables in Expressions
const age = 25;
return <p>I am {age} years old.</p>;
4. Using Expressions for Calculations
return <p>2 + 5 = {2 + 5}</p>;
5. Calling Functions Inside JSX
function greet() {
return "Welcome to React!";
}
return <h2>{greet()}</h2>;
6. Conditional Rendering with Ternary Operators
React doesn’t allow if statements directly in JSX, but you can use ternary expressions.
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? <p>Dashboard</p> : <p>Please Log In</p>}
</div>
);
7. Short-Circuit Rendering (&&)
Great for rendering elements only when a condition is true.
const show = true;
return <div>{show && <p>This is visible</p>}</div>;
If show is false → nothing renders.
8. Using Template Literals Inside Expressions
const first = "React";
const second = "Expressions";
return <h3>{`${first} ${second}`}</h3>;
9. Rendering Arrays in React Expressions
Arrays render each item in order (best used for lists with .map()).
const items = ["HTML", "CSS", "JS"];
return <div>{items}</div>;
Output:
HTMLCSSJS
(It prints them without commas unless you format them.)
10. Mapping Arrays to JSX (Most Common Use)
This is one of the most powerful uses of React expressions:
const languages = ["JavaScript", "TypeScript", "Python"];
return (
<ul>
{languages.map((lang, i) => (
<li key={i}>{lang}</li>
))}
</ul>
);
11. Using Objects in Expressions
You cannot display an object directly:
return <p>{user}</p>; // ❌ Error
But you can access its properties:
const user = { name: "Luke", role: "Developer" };
return <p>{user.name} — {user.role}</p>;
12. Embedding JSX Inside Expressions
JSX is just an expression too!
const message = <strong>React is awesome!</strong>;
return <p>{message}</p>;
13. React Expressions Inside Attributes
You can even use them inside attributes:
const imageUrl = "/avatar.png";
return <img src={imageUrl} alt="Profile" />;
14. Expressions Cannot Return Undefined for UI
If an expression evaluates to undefined, nothing shows.
const data = undefined;
return <p>{data}</p>; // Renders nothing — no error
Useful for hiding optional values “automatically.”
15. Common Mistakes With React Expressions
❌ Using statements
{if (isAdmin) { <p>Admin</p> }} // Wrong
✔ Use ternaries
{isAdmin ? <p>Admin</p> : null}
16. Why React Expressions Matter
They allow React to:
- Dynamically update UI based on state & props
- Make JSX behave like real JavaScript
- Enable reuse, modularity, and logic directly in markup
- Make complex UI rendering concise and flexible
They are at the heart of React’s declarative nature.
17. Practical Example
function Profile({ user }) {
return (
<div>
<h1>{user.name}</h1>
<p>Status: {user.online ? "Online" : "Offline"}</p>
{user.online && <span className="green-dot"></span>}
<h3>Skills</h3>
<ul>
{user.skills.map((skill) => (
<li key={skill}>{skill}</li>
))}
</ul>
</div>
);
}
This demonstrates conditional renders, mappings, and value interpolation—all using React Expressions.
Summary
React Expressions let you embed dynamic JavaScript logic inside JSX using {} so your UI updates automatically based on values, functions, and conditions.
About the Author
Latest tech news and coding tips.
