Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Building Complex UI with JSX | Fundamentals of React and Component-Based UI
React Mastery

book
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
<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
<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
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>
);
question mark

When working with nested JSX, what is the rule regarding the number of parent elements?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 5

Chieda ad AI

expand
ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

We use cookies to make your experience better!
some-alt