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 <p> part of our JSX element we want to eventually display.

We can’t have two JSX statements that individually have their own separate React.createElement function. This means two functions with 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','World')]
        )
     )

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

Now the problem here 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 effects 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
aaron.smith.07@aberdeen.ac.uk

Advertisement