Dynamic Data and Working with Expressions in JSX 

Back to: ReactJS Tutorials

Dynamic Data and Working with Expressions in JSX:

In this article, I am going to discuss Dynamic Data and Working with Expressions in JSX with Examples. Please read our previous article where we discussed Adding CSS Styling to React Project.

Dynamic Data and Working with Expressions in JSX:

In our previous article, we discussed styling our components. Now, before we dig deeper into tweaking the final look and adding more UI elements, let’s think about one problem. We probably won’t have just one expense and definitely not an expense where the data is just hard-coded into the component as it is here.

The date, the title, and the amount are hard coded here. And it’s the only expense we have. In our final tracker, we want to have an unlimited amount of expenses if we want to. We want to have multiple expense item components in action. And after all, that is one of the core ideas behind components.

It’s not just a separation of concerns, it’s reusability there as well. We want to define a component and its HTML code once, and then we want to be able to reuse it. For now, we’re not able to do that. Therefore, this will be the next problem that we’ll work on.

But before we work on that there’s another problem that we have to solve first. As we mentioned that all that data is hard coded in the JSX code. This is unrealistic. Some data may be hard coded sometimes but here for an expense item, something like the date, title, and amount would typically be dynamic, which means it’s not hard coded in the HTML code Instead we receive that data from somewhere. for example, from the user who entered it into a form, and then we output it dynamically.

For now, we don’t have the capabilities yet to receive the data from the user but we can fake dynamic data by at least adding more than just HTML code to this component. Because after all, we must not forget that a component in React is just a function. As we mentioned earlier that components are the combination of HTML, to some extent CSS and also JavaScript.

Where is the JavaScript?

Now we’ve already seen the HTML in action, we’ve also added some CSS but where’s the JavaScript? Well, let’s add some JavaScript code to that function before we return. 2.48

const expenseDate = new Date(2023, 4, 27);
const expenseTitle = “Household Expense”;
const expenseAmount = 25000;

Here we have defined 3 constants (a variable that may never change). And we store the date, title, and amount in these 3 constants. We stored Date by using the built-in date constructor which comes with JavaScript. We give ‘May’ as a month since the month field here starts at zero, and ‘May’ has the number 4. This is how we can create a date object in regular JavaScript. It has nothing to do with React. And we can and we have JavaScript code like this in our components. Here just to create some dummy data but later in the course and in your React applications that could be any kind of code. For example, to send an HTTP request and fetch data from a database, to validate user input, or to do any other kind of task.

Then we store our title as a string in constant. And lastly stored the amount in the constant. So, we have these three constants in regular JavaScript code.

And we now want to output these values in the HTML code. This is a typical task. As you don’t have data hard coded in HTML, instead to output dynamic data you use a special syntax that React gives you inside of these JSX code snippets. You can replace hard-coded data with opening and closing curly braces. And the special thing about these curly braces inside of your JSX code snippets is that, in these curly braces, you can run basic JavaScript expressions.

For example, {1+1}, you can execute something like this and the result of this expression will be output on the screen.

We can also generate a random number with the built-in math object,

{Math.random()}

And we see the number here and every time we reload, we get a new number. Now here, we don’t want to get a random number or add one plus one. Instead, we want to refer to the value that is stored in the constant. And therefore, we can just repeat that constant name here.

{expenseTitle}

This is also a valid JavaScript expression that is pointing at a variable or a constant. In this case, a constant. And now JavaScript will extract the value stored in this constant and inject it here, into this HTML code.

So, if we now save that, we again see Household Expense as output just like before,

Now it’s not hard coded in the HTML code but instead here its output dynamically and the concrete value is taken from that constant. It’s still hard-coded, but it’s just a first step. Now we can do the same for the amount,

₹{expenseAmount}

Here, it will point to expenseAmount,

And for the date, we can do the same thing. We can output expenseDate. Though for the date we have to keep in mind that it’s a date object. And therefore, if we try to save it like,

{expenseDate}

It will give an error. Because, being a date object, it can’t be output as text. However, we can call ‘toISOString’ method,

{expenseDate.toISOString()}

It’s a built-in method available on all date objects to output it as a string. Now, if we save it and see the output,

And now we see this at least. Not super readable but a first step. We will refine and fine-tune it later. For now, we just achieved one important thing. We now no longer work with hard-coded text in our HTML code but instead, we have these dynamic placeholders, you could say. Where the concrete value can be the result of a calculation of an HTTP request or can be the value stored in a constant or variable.

And now we can move on and take a closer look at how we can make this expense item more reusable. So that’s not always the same data that we are outputting. And so that we can have multiple expense items based on one of the same components with different data.

In the next article, I am going to discuss How to Make React Component Reusable with Examples. Here, in this article, I try to explain Dynamic Data and Working with Expressions in JSX with Examples. I hope you enjoy this Dynamic Data and Working with Expressions in JSX article.