JSX Expressions

A JSX expression is a JavaScript expression written inside JSX using curly braces.

const name = "Rahul";

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

Here, {name} is a JSX expression.

Curly braces tell JSX that the content inside them should be evaluated as JavaScript.

<h1>Hello {name}</h1>

The value stored in name is displayed on the page.

A string variable can be displayed inside JSX.

function App() {

    const course = "React";

    return (
        <h2>Course: {course}</h2>
    );

}

The browser displays Course: React.

Numbers can also be displayed inside JSX expressions.

const age = 22;

return (
    <p>Age: {age}</p>
);

You can perform addition directly inside a JSX expression.

return (
    <h2>Total: {10 + 20}</h2>
);

The result displayed is 30.

Mathematical calculations can be performed inside curly braces.

const price = 500;
const quantity = 3;

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

The result is 1500.

const total = 1000;
const discount = 200;

return (
    <p>Final Price: {total - discount}</p>
);

The expression calculates the final price.

const total = 500;
const students = 5;

return (
    <p>Amount: {total / students}</p>
);

The expression calculates the amount per student.

A JSX component can contain multiple expressions.

const name = "Amit";
const age = 20;
const course = "React";

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

JavaScript string concatenation can be used inside JSX.

const firstName = "Rahul";
const lastName = "Kumar";

return (
    <h2>
        {firstName + " " + lastName}
    </h2>
);

Template literals can be used inside JSX expressions.

const name = "Rahul";
const course = "React";

return (
    <p>
        {`${name} is learning ${course}`}
    </p>
);

JavaScript boolean expressions can be evaluated inside JSX.

const isLoggedIn = true;

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

Note that displaying a boolean directly is generally not useful for user interfaces. Boolean values are more commonly used in conditions.

Comparison operators can be used inside JSX expressions.

const age = 20;

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

The expression produces a boolean value.

The ternary operator is commonly used for conditional output in JSX.

const age = 20;

return (
    <h2>
        {age >= 18 ? "Adult" : "Minor"}
    </h2>
);

The && operator can conditionally render JSX.

const isAdmin = true;

return (
    <div>
        {isAdmin && <p>Admin Panel</p>}
    </div>
);

The paragraph is rendered when isAdmin is true.

A function can be called inside a JSX expression.

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

return (
    <h2>{getMessage()}</h2>
);

function greet(name) {
    return "Hello " + name;
}

return (
    <h2>{greet("Amit")}</h2>
);

The function returns a string that is displayed in the heading.

Properties of JavaScript objects can be accessed inside JSX.

const student = {
    name: "Neha",
    age: 21
};

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

JavaScript array properties can also be used in JSX expressions.

const students = ["Amit", "Ravi", "Neha"];

return (
    <p>
        Total Students: {students.length}
    </p>
);

The map() method is commonly used to display arrays of data as JSX elements.

const names = ["Amit", "Ravi", "Neha"];

return (
    <div>
        {names.map(name => (
            <p key={name}>
                {name}
            </p>
        ))}
    </div>
);

JavaScript expressions can also be used as JSX attribute values.

const imageUrl = "profile.jpg";

return (
    <img
        src={imageUrl}
        alt="Profile"
    />
);

A variable can be used to dynamically set a CSS class.

const className = "active";

return (
    <div className={className}>
        Active Item
    </div>
);

A JavaScript object can be used as a dynamic inline style.

const textColor = "blue";

return (
    <p style={{ color: textColor }}>
        Blue Text
    </p>
);

JavaScript objects and methods can be used in JSX expressions.

const today = new Date();

return (
    <p>
        Today: {today.toLocaleDateString()}
    </p>
);

The browser displays the current date according to the environment's locale settings.

JavaScript string methods can be used inside JSX expressions.

const name = "react";

return (
    <h2>
        {name.toUpperCase()}
    </h2>
);

The output will be REACT.

JSX curly braces expect JavaScript expressions. Statements such as a normal if statement cannot be placed directly inside them.

// Not valid

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

Use a ternary expression or prepare the value before returning JSX.

Complex calculations can be performed before the JSX is returned.

const price = 500;
const quantity = 2;

const total = price * quantity;

return (
    <p>
        Total: {total}
    </p>
);

This can make complex JSX easier to read.

function App() {

    const name = "Rahul";
    const age = 22;
    const course = "React";

    return (
        <div>

            <h1>Hello {name}</h1>

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

            <p>Course: {course}</p>

            <p>
                Next Year Age: {age + 1}
            </p>

        </div>
    );

}

• Use curly braces for JavaScript expressions.
• Keep expressions simple when possible.
• Prepare complex calculations before the return statement.
• Use meaningful variable names.
• Use ternary expressions for simple conditions.
• Use && for simple conditional rendering.
• Use map() when rendering arrays.
• Use object properties to display structured data.
• Avoid putting complicated logic directly inside JSX.

function App() {

    const student = {
        name: "Rahul",
        age: 21,
        course: "React",
        marks: 85
    };

    const result =
        student.marks >= 40
        ? "Pass"
        : "Fail";

    return (
        <div className="container">

            <h1>
                Welcome {student.name}
            </h1>

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

            <p>
                Course: {student.course}
            </p>

            <p>
                Marks: {student.marks}
            </p>

            <p>
                Result: {result}
            </p>

            <p>
                Next Year Age: {student.age + 1}
            </p>

        </div>
    );

}

export default App;

This example demonstrates object properties, calculations, variables, and a conditional expression inside JSX.