JavaScript Expressions

In JSX, you can seamlessly integrate JavaScript expressions within your HTML-like syntax. This powerful feature allows you to dynamically render content and make your components more interactive and flexible.

Using JavaScript Expressions in JSX

To use JavaScript expressions in JSX, you enclose them in curly braces {}. This allows you to embed variables, perform calculations, and call functions directly within your JSX.

Example

Here’s an example demonstrating the use of JavaScript expressions inside JSX:

const lang = "English";
return (
  <>
    <p>I am speaking in {lang}. I am {5 + 12 + 2} years old.</p>
  </>
);

Output:

I am speaking in English. I am 19 years old.

In this example:

• The variable lang is embedded within the paragraph using curly braces.
• A simple arithmetic expression {5 + 12 + 2} is evaluated and rendered as part of the text.

Template Literals in JSX

Template literals provide an even more powerful way to include dynamic content within your JSX. They allow you to embed expressions and variables within a string, making it easy to construct complex strings.

Example

Here’s an example using template literals in JSX:

const lang = "English", lang2 = "Hindi", lang3 = "Gujarati";
return (
  <>
    <p>I am speaking in {`${lang}, ${lang2} and ${lang3}`}.</p>
  </>
);

Output:

I am speaking in English, Hindi and Gujarati.

In this example:

• The template literal ${lang}, ${lang2} and ${lang3} dynamically constructs a string with multiple variables.

Best Practices

• Keep Expressions Simple: For better readability and maintainability, keep your JavaScript expressions simple and concise.
• Use Functions for Complex Logic: If you need to perform complex calculations or logic, consider extracting that logic into a function and then calling the function within your JSX.

function calculateAge(birthYear) {
  const currentYear = new Date().getFullYear();
  return currentYear - birthYear;
}

const birthYear = 2000;
return (
  <>
    <p>I am {calculateAge(birthYear)} years old.</p>
  </>
);