Why does JSX only allow one outer element?


Why does JSX only allow one outer element?


It is not just about JSX, it is a JavaScript limitation that affects JSX.
In JavaScript, a function can only return one expression by design, for example:

function textJoin(text, txt){
  return `${text} ${txt}`;

console.log(textJoin('this', 'is'))// returns and logs `this is`

if we were to say:

 return text
 return txt


  return text, txt

We will encounter that the first one will only read the first return and the second one will only return the last value (txt), yet if we get rid of the comma we will encounter an error:
SyntaxError: Unexpected token, expected ;

Since JSX is still JavaScript, its return can only handle one expression therefore to return more than one element we need to wrap it in another (an outer element), which most commonly will be a <div></div>.


Update: You can now use <React.Fragment></React.Fragment> and its short hand <>…</> instead of creating an unnecessary

in your mark up.

See: https://reactjs.org/docs/fragments.html