Why can a React component not return two sibling elements without a wrapper?
A function can return only one value, and JSX tags compile to one call each. Wrap siblings in a parent element or a Fragment (<>...</>), which groups them without adding an extra DOM node.
Explain it simply
Think of a tiffin carrier: you hand over one carrier, even if it holds three boxes inside. A component must also return one thing. Two JSX tags side by side would be two return values, which JavaScript does not allow.
A div wrapper works, but it adds a useless node that can break CSS layouts such as flex or table rows. A Fragment groups children and disappears in the final HTML.
Example
function Row() {
return (
<>
<td>Name</td>
<td>Marks</td>
</>
);
}
// Inside <tr><Row /></tr> there is no extra div, so the table stays validWhen you need a key (inside a list) use the long form <React.Fragment key={id}>.
What to say in the interview
"A component returns one value, so sibling elements need a common parent. I use a Fragment when I do not want an extra DOM node, for example inside table rows or flex containers. The short syntax cannot take a key, so in lists I write React.Fragment with a key."
Common mistakes
- Using a div wrapper inside a table row and breaking the HTML.
- Trying to put a key on the short <></> syntax.