Why JSX expressions must have one parent element?

Photo by Manasvita S on Unsplash

JSX (Javascript extension to have HTML in JS file) will not be understood by browser directly, so we need to convert in to ones(HTML, CSS, Javascript) which browser can understand with the helper of babel

Now say we have a JSX syntax with same a level

We got an error as it needs a parent

This is because, we cannot convert it into React.createElement when we don’t have parent element.

The above statements will be transpiled to

Invalid statements

Render is function responsible for rending to UI, The above statement is not a valid javascript statement, we cannot have comma separated too, as render function will accept only one params, if we add comma, the second element will be get into the second param

Only first argument element is displayed with an warning that it accepts one argument

Now when we wrap into a parent, only one element which is the parent can be send to the render method, and createElement’s third argument can nest as many child elements we need to

So we need to have parent element wrapper so that it cannot be converted in pure javascript easily