Why the Div in React ?

So when you first start using react, you will have no doubt written something like the below

const App = () => {
    return(
      <p>Hello</p>
      <p>World</p>
     )
}

What's wrong with that you might ask ?

React tries to convert our JSX and this pops out

 Failed to compile.
 ./src/App.js
Syntax error: Adjacent JSX elements must be wrapped in
an enclosing tag (6:8) 


Behind the scenes for all the JSX statement you write in a component, they need to be wrapped into one container. But wait why is it necessary ?

To answer this we have to think about what happens when React turns our JSX into eventually the HTML we see on the page. The first step in this process is to convert any JSX statement into an object. Behind the scenes React takes our JSX and a transpiler like Babel feeds the parts of that JSX into the React.createElement function.

If we look at the API for createElement

function createElement(elementType, props, […children]) {}

The arguments are defined as

1) elementType - The HTML Tag you want to display

2) props - Data like attributes or styling you want to pass

3) children - Anything you want to pass between the eventual HTML tags, most likely some text but can be other things (see below!)

Here's the example of our JSX from above

<p>Hello</p> // JSX

Becomes

React.createElement(<p>, null, 'Hello')

The React.createElement function takes only one 'elementType' , that is the

part of our JSX element we want to eventually display.

We can't have two JSX statements that will individually have separate React.createElement functions. This means two return statements and React will throw an error! Each function must only return one value in JavaScript.

So what is the solution to this conundrum?

We wrap our JSX into a div.

const App = () => {
    return( 
       <div>
         <p>Hello</p>
         <p>World</p>
      </div>
     )
  }

So behind the scenes this is what it looks like

   Return (
     React.createElement('div', 'null',       
        [React.createElement('p','null','Hello'),
        React.createElement('p','null','Hello')]
        )
     )

The App function can only return one value, by making our JSX statement a child of a div we can assign as many React.createElement's as we like to get the output what we want.

Now the problem here with wrapping inside a div is that we end up bloating the DOM up with pointless div sitting in our eventual HTML. This may not be a problem for a simple component, but more complex components you can imagine how this affects the eventual running of the component and App.

The other problem you may come into contact with is layout in your React application. You can imagine if there are div elements where there shouldn't be, using FlexBox to layout your page may not look the way you intended.

To deal with this problem, we will see in the next article!

About the Author

I'm a practising medical physician and educationalist as well as a web developer.

Please see here for further details about what I'm up to project-wise on my blog and other posts.

I'd be grateful for any comments or if you want to collaborate or need help with python please do get in touch. If you want to get in contact with me, please do so here
[e-mail]

Comments

[Keith Charles]

Hi Aaron! I was a little confused by the post for a while, but I think you meant to put more than one paragraph tag inside your return. As you have it now, this is a valid react component with no compiling errors.

We wrap our jsx elements inside of divs (or fragments which I assume you're going to get into on the next article 😉) when we have more than one element we need to render in a single component. So your thoughts are correct, but it doesn't seem like your code is reflecting the "multiple elements" being rendered in a single component.

Great post otherwise! Awesome lesson for those just jumping into React and JSX! 👍

[Aaron Smith]

Hi Keith,

Thanks for your feedback! You're absolutely right, I was playing around with what might be the simplest way to reflect the error. I've edited the post now to make it reflect the text, along with a few grammar mistakes corrected too.

Kind regards
Aaron

[calag4n]

I think the mistake is to put a render method inside your functional component .

Get rid of the line render() { (and obviously its closing curly brace) and that should work fine I guess.

[Aaron Smith]

Thanks for your feedback! You're absolutely right of course. I've edited the post accordingly.