React Rendering Expressions

by

React allows you to use JavaScript expressions directly inside JSX to decide what should appear on the screen. These expressions are one of the most important parts of React because they allow your UI to display dynamic values instead of only static HTML.

For example, instead of writing:

<h1>Hello, John</h1>

you can store the name in a JavaScript variable and render it dynamically:

const name = "John";

function App() {
  return <h1>Hello, {name}</h1>;
}

The curly braces {} tell React that the content inside them should be treated as a JavaScript expression rather than ordinary JSX text.

Rendering expressions is the foundation for working with variables, calculations, objects, arrays, function results, conditions, and data received through props or state.

What Is a Rendering Expression?

A rendering expression is a JavaScript expression placed inside JSX so that its resulting value can be displayed in the UI.

The basic syntax is:

{expression}

For example:

function App() {
  const name = "Arafat";

  return <h1>Hello, {name}</h1>;
}

Here:

  • name is a JavaScript variable.
  • {name} is a JSX expression.
  • React evaluates the expression.
  • The resulting value is rendered in the browser.

The browser displays:

Hello, Arafat

The curly braces are therefore an important bridge between JavaScript logic and JSX markup.

Why Does React Use Curly Braces?

JSX looks similar to HTML, but it is actually JavaScript syntax that allows you to describe UI.

When React sees:

<h1>Hello</h1>

Hello is treated as JSX text.

When React sees:

<h1>{name}</h1>

React knows that name should be evaluated as JavaScript.

For example:

const name = "Arafat";

return <h1>{name}</h1>;

React effectively evaluates:

name

and inserts its result into the JSX.

This allows JSX to combine markup and JavaScript naturally.

Rendering Variables

One of the simplest uses of expressions is rendering variables.

function App() {
  const name = "Arafat";
  const age = 22;

  return (
    <div>
      <h1>Name: {name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

The result is:

Name: Arafat
Age: 22

You can render different types of JavaScript values depending on what React can represent in JSX.

Rendering Strings

Strings can be rendered directly.

function App() {
  const message = "Welcome to React";

  return <h1>{message}</h1>;
}

React displays:

Welcome to React

You can also combine multiple expressions:

function App() {
  const firstName = "Arafat";
  const lastName = "Sk";

  return (
    <h1>
      {firstName} {lastName}
    </h1>
  );
}

The result is:

Arafat Sk

Rendering Numbers

Numbers can also be rendered.

function App() {
  const price = 999;

  return <p>Price: ₹{price}</p>;
}

React displays:

Price: ₹999

You can also perform calculations inside JSX.

function App() {
  const price = 500;
  const quantity = 3;

  return <p>Total: ₹{price * quantity}</p>;
}

The result is:

Total: ₹1500

The expression:

price * quantity

is evaluated before React renders the result.

Performing Calculations Inside JSX

JavaScript calculations can be placed directly inside curly braces.

function App() {
  return (
    <div>
      <p>{10 + 20}</p>
      <p>{50 - 10}</p>
      <p>{5 * 4}</p>
      <p>{100 / 2}</p>
    </div>
  );
}

React renders:

30
40
20
50

You can also use variables:

const price = 100;
const quantity = 4;

return <p>Total: {price * quantity}</p>;

This is useful for simple calculations, but complex calculations are usually better performed before the JSX.

Rendering Boolean Expressions

Boolean values are different from strings and numbers.

For example:

const isLoggedIn = true;

return <p>{isLoggedIn}</p>;

React does not display:

true

in normal JSX output.

Likewise:

const isLoggedIn = false;

return <p>{isLoggedIn}</p>;

does not display false.

This is important because boolean values are commonly used to control whether something should be rendered rather than being displayed as text.

For example:

const isLoggedIn = true;

return (
  <div>
    {isLoggedIn && <p>Welcome back!</p>}
  </div>
);

Here the boolean controls whether the message appears.

Rendering Expressions With Operators

JavaScript operators can be used inside JSX expressions.

For example:

const age = 22;

return <p>{age >= 18}</p>;

The expression produces:

true

but React does not display the boolean value.

Instead, the expression can be used for conditional rendering:

const age = 22;

return (
  <div>
    {age >= 18 && <p>You are eligible.</p>}
  </div>
);

This displays:

You are eligible.

You can use comparison operators such as:

>
<
>=
<=
===
!==

and logical operators such as:

&&
||
!

inside JavaScript expressions.

Rendering Conditional Expressions

Expressions can determine which content React should display.

The ternary operator is particularly useful:

const isLoggedIn = true;

return (
  <h1>
    {isLoggedIn ? "Welcome back!" : "Please log in"}
  </h1>
);

If isLoggedIn is true, React displays:

Welcome back!

If it is false, React displays:

Please log in

You can also render complete components:

{isLoggedIn ? <Dashboard /> : <Login />}

This is one of the most common patterns in React applications.

Rendering Function Results

You can call JavaScript functions inside JSX expressions.

function getMessage() {
  return "Welcome to React";
}

function App() {
  return <h1>{getMessage()}</h1>;
}

React evaluates:

getMessage()

and renders the returned value.

The result is:

Welcome to React

You can also pass arguments:

function greet(name) {
  return `Hello, ${name}`;
}

function App() {
  return <h1>{greet("Arafat")}</h1>;
}

The result is:

Hello, Arafat

Rendering Template Literals

Template literals are useful when you need to combine multiple values into a string.

function App() {
  const name = "Arafat";
  const age = 22;

  const message = `My name is ${name} and I am ${age} years old.`;

  return <p>{message}</p>;
}

You can also use the template literal directly:

function App() {
  const name = "Arafat";

  return <h1>{`Hello, ${name}!`}</h1>;
}

Template literals are especially useful when several JavaScript values need to be combined into one string.

Rendering Object Properties

React does not normally render a JavaScript object directly as visible text.

For example, this is not the correct approach:

const user = {
  name: "Arafat",
  age: 22
};

return <p>{user}</p>;

Instead, access the properties you want to display:

return (
  <div>
    <h2>{user.name}</h2>
    <p>{user.age}</p>
  </div>
);

React can render the individual property values.

You can also use nested properties:

const user = {
  name: "Arafat",
  address: {
    city: "Hyderabad"
  }
};

return <p>{user.address.city}</p>;

The result is:

Hyderabad

Rendering Array Data

Arrays are extremely common in React applications.

For example:

const skills = ["HTML", "CSS", "JavaScript", "React"];

You can use map() to transform each item into JSX:

function App() {
  const skills = ["HTML", "CSS", "JavaScript", "React"];

  return (
    <ul>
      {skills.map((skill) => (
        <li key={skill}>{skill}</li>
      ))}
    </ul>
  );
}

React renders:

  • HTML
  • CSS
  • JavaScript
  • React

Here:

skills.map(...)

is a JavaScript expression.

Each item is transformed into a React element.

Rendering Array Length

You can render information about an array using its length property.

const skills = ["HTML", "CSS", "JavaScript", "React"];

return <p>Total skills: {skills.length}</p>;

React displays:

Total skills: 4

This can be useful for displaying counts:

<p>{products.length} products available</p>

Rendering Nested Expressions

Expressions can be combined.

const price = 100;
const quantity = 3;
const discount = 20;

return (
  <p>
    Final Price: ₹{price * quantity - discount}
  </p>
);

The expression:

price * quantity - discount

is evaluated by JavaScript.

The result is:

Final Price: ₹280

Although this works, avoid putting very complicated logic directly inside JSX.

Rendering Expressions From Props

Expressions become especially useful when working with components and props.

function User({ name }) {
  return <h2>Welcome, {name}</h2>;
}

function App() {
  return <User name="Arafat" />;
}

The component receives:

name

and renders it using:

{name}

Props allow the same component to display different values.

<User name="Arafat" />
<User name="Rahul" />
<User name="Sara" />

Each component instance can display different content.

Rendering Expressions From State

State values can also be rendered inside JSX.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

Initially:

Count: 0

After clicking the button:

Count: 1

Then:

Count: 2

The expression:

{count}

is automatically updated when the state changes.

This is one of the fundamental ideas behind React’s dynamic UI.

Rendering Expressions in Attributes

Expressions are not limited to visible text.

They can also be used for JSX attributes.

For example:

const imageUrl = "/images/react.png";

return <img src={imageUrl} alt="React logo" />;

Here:

src={imageUrl}

uses a JavaScript expression to determine the value of the src attribute.

You can also use calculations or conditional expressions:

const isDisabled = true;

return <button disabled={isDisabled}>Submit</button>;

Expressions therefore work throughout JSX, not just between HTML-like tags.

Rendering Expressions With className

You can use expressions to dynamically determine CSS classes.

const isActive = true;

return (
  <div className={isActive ? "active" : "inactive"}>
    Profile
  </div>
);

If isActive is true, the class becomes:

class="active"

If it is false, the class becomes:

class="inactive"

This is useful when UI appearance depends on state or other data.

Rendering Expressions With style

Expressions can also be used with inline styles.

const textColor = "blue";

return (
  <p style={{ color: textColor }}>
    Hello React
  </p>
);

The value of textColor determines the rendered style.

You can also use conditional expressions:

const isError = true;

return (
  <p
    style={{
      color: isError ? "red" : "green"
    }}
  >
    Status
  </p>
);

Rendering null

Sometimes you don’t want to render anything.

React allows you to return null from a component or use it in a conditional expression.

function Message({ show }) {
  if (!show) {
    return null;
  }

  return <p>Hello!</p>;
}

You can also use:

{showMessage ? <Message /> : null}

This means that nothing is rendered when the condition is false.

What Can You Put Inside JSX Curly Braces?

You can use many JavaScript expressions inside JSX.

For example:

{name}

{age + 1}

{user.name}

{items.length}

{getMessage()}

{isLoggedIn ? "Logout" : "Login"}

{isAdmin && <AdminPanel />}

{items.map(item => <p key={item}>{item}</p>)}

The important idea is that the content inside {} must be something JavaScript can evaluate as an expression.

Expressions vs Statements

This distinction is important when working with JSX.

An expression produces a value.

Examples:

name

age + 1

user.name

getMessage()

condition ? "Yes" : "No"

A statement performs an action or controls program flow.

Examples include:

if

for

const

let

You cannot directly put an if statement inside JSX like this:

return (
  <div>
    {if (isLoggedIn) {
      <p>Welcome</p>
    }}
  </div>
);

That is invalid JavaScript syntax.

Instead, use an expression such as a ternary:

return (
  <div>
    {isLoggedIn ? <p>Welcome</p> : <p>Please log in</p>}
  </div>
);

Or use && when you only need to render something when a condition is true:

return (
  <div>
    {isLoggedIn && <p>Welcome</p>}
  </div>
);

Moving Complex Logic Outside JSX

Although expressions are powerful, JSX should remain readable.

Avoid creating extremely complicated expressions like:

<p>
  {users.filter(user => user.active && user.age >= 18).map(user => user.name).join(", ")}
</p>

It may work, but it becomes difficult to read and maintain.

A better approach is to prepare the value first:

const activeAdultUsers = users
  .filter(user => user.active && user.age >= 18)
  .map(user => user.name);

return <p>{activeAdultUsers.join(", ")}</p>;

Now the JSX is easier to understand.

Another option is to create a separate function:

function getActiveAdultUsers(users) {
  return users
    .filter(user => user.active && user.age >= 18)
    .map(user => user.name);
}

Then:

const names = getActiveAdultUsers(users);

return <p>{names.join(", ")}</p>;

A useful rule is:

Use JSX expressions for presentation, and move complicated logic into JavaScript variables or functions.

The 0 Rendering Problem

There is an important JavaScript behavior to understand when using expressions with &&.

Consider:

const count = 0;

return (
  <div>
    {count && <p>You have items.</p>}
  </div>
);

You might expect nothing to appear.

However, because count is 0, the expression evaluates to:

0

and React can render that 0.

A safer approach is:

{count > 0 && <p>You have items.</p>}

Now the condition produces a boolean.

This is especially important when working with:

  • Cart item counts
  • Notification counts
  • Search results
  • Product lists
  • Message counts
  • Dashboard statistics

Rendering Optional Data

Expressions can also help when data may not exist.

For example:

const user = {
  name: "Arafat"
};

return <p>{user.name}</p>;

If a nested property may be missing, optional chaining can help:

<p>{user.profile?.city}</p>

The optional chaining operator:

?.

prevents an error when profile is null or undefined.

You can combine it with another expression:

<p>{user.profile?.city || "City not available"}</p>

This provides fallback text when the city is unavailable.

Rendering Expressions in a Practical Example

Consider a simple product card:

function ProductCard() {
  const product = {
    name: "React Course",
    price: 999,
    inStock: true,
    rating: 4.8
  };

  return (
    <article>
      <h2>{product.name}</h2>

      <p>Price: ₹{product.price}</p>

      <p>Rating: {product.rating}/5</p>

      <p>
        {product.inStock ? "Available" : "Out of stock"}
      </p>

      {product.inStock && (
        <button>
          Buy Now
        </button>
      )}
    </article>
  );
}

This small component demonstrates several types of expressions:

{product.name}

{product.price}

{product.rating}

{product.inStock ? "Available" : "Out of stock"}

{product.inStock && <button>Buy Now</button>}

This is how React applications turn JavaScript data into dynamic interfaces.

Common Mistakes

Forgetting Curly Braces

Incorrect:

const name = "Arafat";

return <h1>name</h1>;

This renders the word:

name

Correct:

return <h1>{name}</h1>;

Using Quotes Around Dynamic Values

Incorrect:

<h1>"{name}"</h1>

This can be valid JSX but includes literal quote characters, which is usually not what you want.

Use:

<h1>{name}</h1>

Trying to Render an Object Directly

Avoid:

<p>{user}</p>

Instead:

<p>{user.name}</p>

Putting Statements Inside JSX

Incorrect:

{if (loggedIn) {
  return <p>Welcome</p>;
}}

Use an expression:

{loggedIn && <p>Welcome</p>}

or:

{loggedIn ? <p>Welcome</p> : <p>Login</p>}

Putting Too Much Logic Inside JSX

This makes components difficult to read.

Instead of:

<div>
  {products.filter(...).map(...).filter(...)}
</div>

prepare the data before the return statement whenever the logic becomes difficult to understand.

Best Practices

Keep Expressions Readable

Simple expressions are excellent inside JSX:

<h1>{name}</h1>

<p>Total: ₹{price * quantity}</p>

{isLoggedIn && <Dashboard />}

Complex expressions should usually be moved outside the JSX.

Use Meaningful Variables

Instead of:

<p>{p * q - d}</p>

prefer:

const total = price * quantity - discount;

return <p>Total: ₹{total}</p>;

The second version communicates the purpose of the value much more clearly.

Keep Rendering Focused on the UI

Your JSX should primarily describe what the user sees.

For example:

const total = price * quantity;

return (
  <div>
    <h2>{productName}</h2>
    <p>Total: ₹{total}</p>
  </div>
);

This is easier to maintain than placing every calculation directly into the markup.

Use the Right Conditional Technique

Use a ternary when you need one result or another:

{isLoggedIn ? <Dashboard /> : <Login />}

Use && when you only need something when a condition is true:

{hasNotifications && <Notifications />}

Use if before the return when the logic becomes more complex:

if (isLoading) {
  return <Loading />;
}

A Complete Example

Here is a small React component that combines several rendering expressions:

function App() {
  const user = {
    name: "Arafat",
    age: 22,
    isPremium: true
  };

  const products = [
    { id: 1, name: "React Course", price: 999 },
    { id: 2, name: "JavaScript Course", price: 799 }
  ];

  const totalProducts = products.length;

  return (
    <main>
      <h1>Welcome, {user.name}</h1>

      <p>Age: {user.age}</p>

      <p>
        Account: {user.isPremium ? "Premium" : "Free"}
      </p>

      <p>Total Products: {totalProducts}</p>

      {user.isPremium && (
        <p>You have access to premium content.</p>
      )}

      <h2>Courses</h2>

      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} - ₹{product.price}
          </li>
        ))}
      </ul>
    </main>
  );
}

export default App;

This example uses:

  • Variables
  • Object properties
  • Numbers
  • Calculations
  • Ternary expressions
  • Logical &&
  • Array map()
  • Function expressions
  • Component data
  • Dynamic JSX

This combination represents how expressions are commonly used in real React components.

Image Placement

Place this image immediately after the section “What Is a Rendering Expression?”

Create a 16:9 React educational infographic showing the relationship between JSX and JavaScript expressions.

The visual should show:

JSX
   ↓
{ JavaScript Expression }
   ↓
React evaluates the expression
   ↓
Rendered UI

Include small examples such as:

<h1>{name}</h1>
<p>{price * quantity}</p>
{isLoggedIn && <Dashboard />}

Use a clean modern developer-education design with React branding, code-editor elements, and a browser preview. Keep the text concise and highly readable.

Caption: React uses {} to evaluate JavaScript expressions inside JSX.

Alt text: React JSX rendering expressions showing JavaScript values being rendered into the UI.

Practice Exercise

Create a React component that displays information about a course.

Create the following JavaScript object:

const course = {
  title: "React for Beginners",
  price: 1499,
  students: 1250,
  rating: 4.8,
  available: true
};

Render the following information:

  • Course title
  • Course price
  • Number of students
  • Rating
  • Availability status

Then add these requirements:

{course.available && <button>Enroll Now</button>}

Use a ternary expression to display:

Available

or:

Currently unavailable

Finally, display the number of students using an expression based on:

course.students

Bonus Challenge

Create a discount variable and calculate the final course price using a JSX expression.

For example:

const discount = 200;

Then display:

Final Price: ₹1299

Quick Cheat Sheet

ExpressionPurpose
{name}Render a variable
{user.name}Render an object property
{price * quantity}Perform a calculation
{items.length}Render an array count
{getMessage()}Render a function result
{condition ? A : B}Choose between two results
{condition && <Component />}Render when true
{items.map(...)}Render a list
{user.profile?.city}Safely access optional data
`{value

Key Takeaways

  • JSX uses curly braces {} to evaluate JavaScript expressions.
  • Variables can be rendered directly inside JSX.
  • Calculations can be performed inside expressions.
  • Object properties can be displayed using expressions such as {user.name}.
  • Arrays are commonly rendered using .map().
  • Functions can be called inside JSX expressions.
  • Ternary expressions are useful for choosing between two UI results.
  • && can conditionally render UI.
  • Boolean values themselves are not normally displayed as text by React.
  • Be careful with 0 when using && for conditional rendering.
  • JavaScript statements such as if cannot be placed directly inside JSX expressions.
  • Complex logic should generally be moved outside the JSX to keep components readable.
  • Expressions are the bridge that allows React components to turn JavaScript data into dynamic UI.