Writing More Complex JSX Code

Back to: ReactJS Tutorials

Writing More Complex JSX Code:

In our previous article, we created our first custom component and we are using that in App.js. Now let us make it a bit more exciting. And for that, in the ExpenseItem.js file, we will tweak the HTML code which is being returned here.

Let’s say, expense items should have some title, but we want to display the amount of this expense and then also the date. So, therefore, we want to write HTML code that nicely displays and structures these three pieces of information. Hence here, we could say that we wanted to have a div HTML element that displaced the date, later. And for now, we’re just writing ‘date’ here as a placeholder.

<div>Date</div>;

And then next to that div, we’ll have, let’s say another div, which should display the title, let’s say inside of a h2 tag,

<div><h2>Title</h2><div>;

and then also, another div, next to the title, with the amount,

<div>Amount</div>;

If we write the above 3 statements in IDE, it will look like this,

Now you can see this is getting unreadable, even worse. It seems to have an error as the IDE is complaining about this line of code. Now regarding the readability, we could try to split it across multiple lines, but that would be kind of invalid. So, this code is not valid like this.

In react components, there is one important rule regarding this HTML or this JSX code that we’re returning inside of a component. You should only have one root element, per return statement or per JSX code snippet, you could say. And here we have the side-by-side div elements. This means we have two root elements here in this statement. And that’s not allowed.

Now, why is that not allowed? We will discuss this later. For now, let’s just accept that this is not allowed. And therefore, the question is how we may work around that. One of the easiest works around is to wrap one div into another div, opening, and closing,

function ExpenseItem() {
  return (
    <div>
      <div>Date</div>
      <div>
        <h2>Title</h2>
        <div>Amount</div>
      </div>
    </div>
  );
} 

This is a simple workaround that we can apply immediately. We will also show you another workaround later. Now regarding the readability, we can improve that by wrapping this all-in bracket as we did above. It is just a signal to JavaScript that the content under the parenthesis ‘()’ is one and the same statement even if it should span multiple lines.

And then we can restructure this as we want to. But the quickest way of restructuring is to use the auto-format shortcut (CTRL + F). You can find this shortcut in your preferences->keyboard shortcuts, and there you search for format document.

It automatically formats your code and makes it easier to read. It keeps our code readable and manageable. And we now have more than just one h2 tag. So having only one root element is a very important rule. So inside of this main div which we returned here, you may have multiple elements. Now, we have prepared our basic structure here. Now, you can replace the Title, amount, and date with your information. For example,

Date – May 26th, 2023

Title – House Expenditure

Amount – 25000

something like this.

And if we now save this, the output will be,

Still not looking super nice, but we can see it. And we can see that we can have more complex HTML structures, inside of our components as well. Our application should not just have some HTML code that is ugly. So, in the next article, we will look at how we can add some basic styling here.