How do I embed JavaScript expressions into JSX?

JSX is an extension used to easily create templates in ReactJS, a prominent framework of Javascript. Similar to how Javascript files are saved under the extension .js, React files are saved under the extension. jsx. With JSX, programmers can write HTML code in React and easily render the elements in the React DOM without needing additional methods or functions.

What's more? JSX was created with the intention of easily converting HTML elements into React elements. In fact, JSX is beneficial for all sorts of programmers due to the fact that it’s faster than conventional Javascript. Developers can also design UI templates more easily and implement their concise structure using JSX.

Considering the above, let's discuss a few attributes of JSX and how we can embed Javascript expressions into JSX effectively.

Using JavaScript expressions in JSX

In React, not only are we able to use HTML elements, but we are also allowed to use Javascript expressions along with JSX. Using curly braces {}, along with any valid Javascript expression can be embedded into the JSK code. Here is a code example to explain the embedding of JSX expressions so that you have a better understanding regarding the same −

Example

In the below program, we have embedded the Javascript expression const name = "Beginner"; into the JSX code using curly braces.

import React from 'react';
import ReactDOM from 'react-dom';
const name = "Beginner"; 
const element = <h1>Hello, { name }.Welcome to Tutorialspoint.</h1>;
ReactDOM.render(
   element,
   document.getElementById("root")
);

As discussed, you can embed any valid Javascript expression into your JSK code; for example, 4 + 4 and the employee.lastName are all valid Javascript expressions.

Programmers can further replace if-else statements in JSX. This is possible by making use of conditional statements instead of if-else statements. Let's see how this can be done using the following program −

Example

import React from 'react';
import ReactDOM from 'react-dom';
let i = 1;
const element = <h1>{ (i == 1) ? 'Hello World!' : 'False!' } </h1>;
ReactDOM.render(
   element, 
   document.getElementById("root")
);

Output

Hello World !

Upon execution of the above program, the “Hello World” message will be displayed on the browser.

Unique Attributes in JSX

In HTML, attributes are used to specify the characteristics of an HTML element. Fortunately, JSX allows us to include attributes with the relevant HTML elements. Usually, these attributes are presented in the standard naming convention. However, in regards to JSX, you can find unique attributes presented in the camelcase convention instead.

In Javascript, the word "class" is considered to be a reserved keyword. This is precisely why the camelcase naming convention is used for attributes to prevent errors. And therefore, the class in HTML will be named as className.

What’s more? Programmers can add custom attributes to JSX as well. Custom attributes do not belong to the standard HTML5 attributes. These attributes are created by the programmer. In the camelcase, the attribute name for custom attributes is preceded by data.

Here is an example of using attributes in JSX to give you a better understanding −

Example

The custom attribute data-sampleAttribute, which is camel-cased and prefixed with data-, is used in the program below.

import React from 'react';
import ReactDOM from 'react-dom';
const element = <div>
   <h1 className = "hello">Hello Geek</h1>
   <h2 data-sampleAttribute="sample">Custom attribute</h2>
</div>;
ReactDOM.render(
   element,
   document.getElementById("root")
);

Output

Hello Geek
Custom attribute

How can attributes be specified in JSX?

In JSX, attributes can be specified in the following ways −

• String literals − The attributes like normal strings are enclosed within quotes.

const ele = <h1 className = "firstAttribute">Hello!</h1>;

• Expressions − The attributes like expressions can be enclosed within curly braces.

const ele = <h1 className = {varName}>Hello!</h1>;

How To Add Comments in JSX?

In a neat code, comments are used by programmers to define the purpose of each part and function, which would later be useful during compilation and testing. In JSX, comments begin with /* and end with */, then enclosed within curly braces {} similar to expressions.

Here is an example of how a comment is used in JSX −

Example

In the below JSX program, we are using a sample comment 'This is a comment in JSX', which is enclosed with /**/ and {}.

import React from 'react';
import ReactDOM from 'react-dom';
const element = <div>
   <h1>Hello World !</h1>
   {/ * This is a comment in JSX * /}
   </div>;
ReactDOM.render(
   element,
   document.getElementById("root")
);

Output

Hello World !

Common JSX Expressions Programmers Can Use in Javascript

As we stated earlier, JSX will only accept expressions if it is encapsulated with curly braces{}. But that does not imply that the transcompiler will recognize any expression included within the curly braces.

Here are the common types of expressions which are allowed to be used in JSX −

• Variable and object values
• Function calls and references
• Expressions and operators
• Loops and iteration

Example

In the below program, we are using the variable price within the curly braces −

import React from "react";
const price = 2000;
export default function Vehicles() {
   return(
      <div>
         Car Price: {price}
      </div>
   );
}

Output

Car price:  2000

Geetu Magoo

Updated on: 23-Aug-2022

573 Views

Kickstart Your Career

Get certified by completing the course

Get Started