Embedding Expressions In JSX

Embedding Expressions In JSX

JSX is an extension to the JavaScript language, and therefore it can accept any valid JavaScript expressions placed inside the curly braces. For example, 4 + 4, user.firstName, or formatName(user) are all valid JavaScript expressions. This allows you to make your JSX more dynamic. In this tutorial we’ll take a look at some additional examples of embedding expressions in JSX markup, as well as some of the rules associated with rendering more than one html tag in a JSX expression. We’ll see that one parent element is needed, and learn of a couple of ways to make sure we meet that requirement.


Starting With A Fresh App

Thanks to the Create React App, its super easy to whip up a fresh new application and that is exactly what we’ll do now. We’ll name it cartable, as we want to approximate how a shopping cart works in React.

react $create-react-app cartable
Creating a new React app in C:\node\react\cartable.

Install Bootstrap With React

Now, we’re going to add Bootstrap to make the user interface look nicer. So first off, at the terminal we’ll simply install the latest version of Bootstrap like so.

cartable $npm install bootstrap

+ bootstrap@4.3.1
added 1 package from 2 contributors and audited 36233 packages in 35.67s

In order to make use of Bootstrap, we’ll now need to import it in the index.js file like we see here.
index.js


Creating A Components Folder

We’re going to be adding more than one component in this project, so it makes sense to create a folder to hold the components we’ll need. Here, we can create a new folder in the src folder named components.
react components folder

In that components folder, let’s add a new file that will represent an item in the shopping cart. This is the item.jsx file.
item.jsx
item-jsx in components folder

Now just add some simple JSX markup to that file. It is a single h1 tag with the text Cartable!

Let’s add that component to the index.js file so that it can render on the page. Notice that we are removing the default <App /> rendering and replacing it with <Item />.
index.js

In the index.html file, we can add a class to the body element since we have installed Bootstrap. This will space things out nicely on the page.

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each break point) or fluid-width (meaning it’s 100% wide all the time).

index.html

There we go, we’re on our way!
react element rendered on the page


Expressions In JSX

You can have more than one tag as part of a JSX expression. So far, we’ve only seen a h1 tag, but what if we want to have both a h1 and a button in the same JSX expression. In order for this to work properly, we need an outer wrapping div. JSX Expressions must have one parent element. In addition, it is best practice to wrap the entire JSX expression in parenthesis ( );.
item.jsx

embedded react expression


React.Fragment

You might not want to pollute your html markup with excessive div elements. In the example above, we needed to wrap both the h1 and button tags with one single parent element. This is a rule of JSX. The downside however, is that you will notice if we inspect the markup on the page that there is an extra div element now.
extra div in react markup

We can fix this extra div issue by using the <React.Fragment> tag in place of the <div> element.

react fragment removes extra divs


Adding State To The Component

Now instead of having static content in the JSX expression, we can use some data from the state object to display a value. In this snippet below, we add that state object with a property of count. It’s value is 0. To reference that count in the JSX markup, we use this.state.count.

The output is displaying the value we had set to the count property.
ui updates from state

If we change the value of the count property, then the UI updates automatically.

react state object update


Embedding A Function

It is also possible to embed a function inside of the JSX markup that returns a value. In our Item component below, we have added a styleCount() function. The job of this function is to look at the count state and if it is 0, then return the string value of “No Items”. If the value is greater than 0, then it simply returns that value. In the JSX markup, we can make use of this function with the syntax {this.styleCount()} which outputs whatever value this function returns.

There we go! With the count at 0, we see “No Items”.
embedded expressions in react

When the value is above 0, we see that result instead.

react embedded function result


Learn More


Embedding Expressions In JSX Summary

Working with JSX takes a little time to get used to, but as you play around with the syntax it quickly becomes familiar. In addition, using a code formatter like the Prettier extension will automatically format and clean up your JSX so that makes it easy to produce good-looking markup with minimal effort.