← React Beginner Questions - Set 6 Q55

Why do we need to wrap multiple JSX elements inside a parent container?

React Beginner Questions - Set 6

A component returns one value; JSX with two roots is a syntax error, not a React rule. A fragment satisfies it without adding a DOM node.

Example

1
2
3
4
5
6
7
8
9
10
11

// Syntax error: adjacent JSX elements must be wrapped
// return <h1>A</h1><p>B</p>;

// Valid, but adds a wrapper element to the DOM
return <div><h1>A</h1><p>B</p></div>;

// Valid and invisible in the DOM
return <><h1>A</h1><p>B</p></>;

// Arrays work too, and then each item needs a key
return [<h1 key="h">A</h1>, <p key="p">B</p>];

What to notice

• The constraint comes from JavaScript: a function returns a single expression.
• The wrapper matters in tables and flex layouts, where an extra `<div>` breaks the structure — use a fragment there.
• An array return is legal but rarely worth it; `key` warnings follow immediately.