React Expressions

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.

Start Learning React

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.