Building Complex UI with JSX

In the previous chapter, we explored the basics of JSX. Now, let's dive deeper and learn how to create more complex JSX elements.

The Rule of a Single Parent Element

One important rule when working with nested JSX is that it must return a single parent element. This parent element wraps all the other levels of nested elements. This rule ensures that React can properly render and manage the structure of your JSX. Here's a practical example to illustrate this rule:

Valid JSX:

jsx
9
1
2
3
4
5
6
7
8
9
<div>
  <h1>Welcome to My Website</h1>
  <p>Explore amazing content:</p>
  <ul>
    <li>Article 1</li>
    <li>Article 2</li>
    <li>Article 3</li>
  </ul>
</div>

Invalid JSX (Won't Transpile):

jsx
9
1
2
3
4
5
6
7
<h1>Welcome to My Website</h1>
<p>Explore amazing content:</p>
<ul>
  <li>Article 1</li>
  <li>Article 2</li>
  <li>Article 3</li>
</ul>

Note

When rendering multiple elements like this, we can wrap them all in parentheses () for clarity, but it's not strictly required. Also, remember that this concept applies when we return JSX elements in React components.

Example

jsx
99
1
2
3
4
5
6
7
8
9
10
11
const JSX = (
  <div>
    <h1>Welcome to My Website</h1>
    <p>Explore amazing content:</p>
    <ul>
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
  </div>
);