A JSX expression must have exactly one outermost element.

A JSX expression must have exactly one outermost element.

• A. It can have multiple top-level elements separated by commas.
• B. Exactly one outermost element.
• C. It can be null.
• D. It can be more than one root if wrapped in a fragment.

Answer: (B)

In JSX, a single root element is required so React has one entry point to build and manage the element tree. If you want to render several elements, wrap them in one container element, such as a div, or use a Fragment so you don’t add an extra node to the DOM: <React.Fragment><Header /><Main /><Footer /></React.Fragment> or the shorter <> <Header /><Main /><Footer /> </>. This keeps the expression having exactly one outermost element. The other ideas don’t fit because multiple top-level elements aren’t allowed at the top level in JSX, and while components can render nothing by returning null, that doesn’t satisfy having a root element. Also, a fragment itself is the single outer element when you wrap multiple siblings, so there isn’t more than one root.

In JSX, a single root element is required so React has one entry point to build and manage the element tree. If you want to render several elements, wrap them in one container element, such as a div, or use a Fragment so you don’t add an extra node to the DOM: <React.Fragment>

</React.Fragment> or the shorter <>

</>. This keeps the expression having exactly one outermost element.

The other ideas don’t fit because multiple top-level elements aren’t allowed at the top level in JSX, and while components can render nothing by returning null, that doesn’t satisfy having a root element. Also, a fragment itself is the single outer element when you wrap multiple siblings, so there isn’t more than one root.