Introduction
JSX expressions allow you to use JavaScript values and calculations directly inside React’s JSX. By using curly braces {}, you can display variables, perform calculations, use conditions, access object properties, and call JavaScript functions. Understanding expressions is important because React interfaces often depend on dynamic data. In this chapter, you will practice using JavaScript expressions in JSX, from simple variables and calculations to practical examples involving strings, arrays, objects, and functions. React JSX Expressions practice questions with solutions help to understand the concepts.
1. What is a JSX Expression?
A JSX expression is a JavaScript expression written inside JSX using curly braces {}.
Example:
function App() {
const name = "Aman";
return <h1>Hello, {name}</h1>;
}
export default App;
Here:
{name}
is a JSX expression.
The value of name will be displayed inside the <h1> element.
Output:
Hello, Aman
Answer: A JSX expression allows JavaScript expressions to be used inside JSX by placing them inside {}.
2. How do you display a variable inside JSX?
Create a JavaScript variable and place its name inside curly braces.
Example:
function App() {
const course = "React.js";
return <h1>Learning {course}</h1>;
}
export default App;
Output:
Learning React.js
The expression:
{course}
tells React to evaluate the JavaScript variable and display its value.
Answer: Use {variableName} inside JSX to display a JavaScript variable.
3. Can you perform mathematical calculations inside JSX?
Yes. JavaScript calculations can be performed directly inside JSX expressions.
Example:
function App() {
const price = 500;
const quantity = 2;
return <h2>Total: ₹{price * quantity}</h2>;
}
export default App;
Output:
Total: ₹1000
You can use operators such as:
+
-
*
/
%
For example:
<p>{10 + 20}</p>
<p>{50 - 15}</p>
<p>{5 * 4}</p>
<p>{100 / 5}</p>
Output:
30
35
20
20
Answer: Yes, JavaScript calculations can be performed inside JSX expressions.
4. How do you use a string expression inside JSX?
Strings can be stored in variables and displayed using JSX expressions.
Example:
function App() {
const firstName = "Rahul";
const lastName = "Sharma";
return (
<h1>
{firstName} {lastName}
</h1>
);
}
export default App;
Output:
Rahul Sharma
You can also create a complete string using a template literal:
function App() {
const name = "Rahul";
const message = `Welcome, ${name}`;
return <h1>{message}</h1>;
}
Answer: Strings can be displayed or combined using JavaScript expressions inside JSX.
5. Can you use object properties inside JSX?
Yes. You can access an object’s properties using JavaScript expressions.
Example:
function App() {
const student = {
name: "Priya",
course: "React.js"
};
return (
<div>
<h2>{student.name}</h2>
<p>{student.course}</p>
</div>
);
}
export default App;
Output:
Priya
React.js
Here:
{student.name}
and:
{student.course}
are JSX expressions.
Answer: Object properties can be accessed inside JSX using expressions such as {student.name}.
6. Can you call a JavaScript function inside JSX?
Yes. A function can be called inside a JSX expression if it returns a value that can be rendered.
Example:
function getMessage() {
return "Welcome to React!";
}
function App() {
return <h1>{getMessage()}</h1>;
}
export default App;
Output:
Welcome to React!
The function call:
{getMessage()}
is evaluated by JavaScript, and its returned value is displayed.
Answer: Yes, functions that return renderable values can be called inside JSX expressions.
7. How do you use a conditional expression inside JSX?
You can use the ternary operator inside JSX to choose between two values.
Example:
function App() {
const isLoggedIn = true;
return (
<h1>
{isLoggedIn ? "Welcome Back!" : "Please Login"}
</h1>
);
}
export default App;
Because isLoggedIn is true, the output will be:
Welcome Back!
If the value becomes:
const isLoggedIn = false;
the output will be:
Please Login
Answer: The ternary operator can be used inside JSX to conditionally display one of two values.
8. How do you use an array expression inside JSX?
Arrays can be used with JavaScript methods such as map() to generate JSX elements.
Example:
function App() {
const courses = ["React", "Node.js", "Python"];
return (
<ul>
{courses.map((course) => (
<li key={course}>{course}</li>
))}
</ul>
);
}
export default App;
Output:
React
Node.js
Python
Here:
{courses.map(...)}
is a JSX expression.
Answer: Arrays can be processed with JavaScript methods such as map() inside JSX to generate multiple elements.
9. What happens if you write plain JavaScript directly inside JSX without {}?
JavaScript expressions generally need to be placed inside curly braces when used within JSX.
Correct:
function App() {
const name = "Aman";
return <h1>{name}</h1>;
}
Incorrect:
function App() {
const name = "Aman";
return <h1>name</h1>;
}
The second example displays:
name
It does not display the value of the variable.
The correct expression is:
<h1>{name}</h1>
Answer: Use {} when you want JSX to evaluate a JavaScript expression instead of displaying the text literally.
10. Create a React component using multiple JSX expressions
Let’s combine several concepts into one practical example.
function App() {
const student = {
name: "Riya",
course: "React.js",
marks: 85
};
const total = 100;
const percentage = (student.marks / total) * 100;
function getResult() {
return student.marks >= 40 ? "Pass" : "Fail";
}
return (
<div>
<h1>Student Result</h1>
<h2>Name: {student.name}</h2>
<p>Course: {student.course}</p>
<p>Marks: {student.marks}</p>
<p>Percentage: {percentage}%</p>
<p>Result: {getResult()}</p>
<p>
Status:{" "}
{student.marks >= 75 ? "Excellent" : "Keep Practicing"}
</p>
</div>
);
}
export default App;
Output:
Student Result
Name: Riya
Course: React.js
Marks: 85
Percentage: 85%
Result: Pass
Status: Excellent
This example uses:
- Object properties
- Mathematical expressions
- Function calls
- Ternary expressions
- Variables inside JSX
Answer: JSX expressions allow React components to display and calculate dynamic data using normal JavaScript.
Key Takeaways
- JSX expressions are written inside curly braces
{}. - Variables can be displayed directly inside JSX.
- Mathematical calculations can be performed inside JSX.
- Object properties can be accessed using JSX expressions.
- JavaScript functions can be called inside JSX when they return renderable values.
- The ternary operator can be used for conditional output.
- Array methods such as
map()can generate JSX elements. - Text written without
{}is treated as JSX text rather than a JavaScript variable. - JSX expressions make React interfaces dynamic.
- Understanding JavaScript expressions is important for writing practical React components.
FAQs
1. What are JSX expressions?
JSX expressions are JavaScript expressions written inside JSX using curly braces {}.
2. Why are curly braces {} used in JSX?
Curly braces tell React to evaluate the content as a JavaScript expression.
Example:
<h1>{name}</h1>
3. Can I perform calculations inside JSX?
Yes. You can perform JavaScript calculations directly inside JSX.
<p>{10 + 20}</p>
The output is:
30
4. Can I use object properties inside JSX?
Yes. For example:
<p>{student.name}</p>
This displays the value of the name property.
5. Can I call a function inside JSX?
Yes, if the function returns a value that can be rendered.
<p>{getMessage()}</p>
6. Can I use conditions inside JSX?
Yes. The ternary operator is commonly used for simple conditional rendering.
{isLoggedIn ? "Welcome" : "Login"}
7. Can I use arrays inside JSX?
Yes. Array methods such as map() are commonly used to convert array data into JSX elements.
{courses.map((course) => (
<li key={course}>{course}</li>
))}
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
