Adjacent JSX elements must be wrapped in an enclosing tag…

Kate Schlunz
Sep 2, 2018 · 3 min read

If you are like me you’ve probably gotten these errors in React and been scratching your head on how exactly this is happening when you are clearly nesting div on div on div…making a div inception if you will. I feel I have always gotten around this error with that div mess but this time I just couldn’t quite figure it out. I have been building a side project recently in React-Redux and using 4 different API’s. The project had been going pretty smooth and I was learning even more about how to use Redux, especially using multiple async calls.

But then….. a wild “Adjacent JSX elements must be wrapped in an enclosing tag” error started haunting my styling of the page. For the life of me I could not figure out how I was going to render 3 components on the page and style them all differently. Nothing was working, I had a table up-top and wanted to create two different grids underneath with my 2 other sets of data from API calls. Enter…. Fragment!! The most glorious discovery of React I’ve made so far.

What is Fragment you may ask. React@16.2 introduces the Fragment component. Instead of creating div inception and the inability to use Semantic, Bootstrap and Material UI on different components you are rendering you now have the ability to use Fragment avoid having to wrap multiple elements in <div>’s or <spans> so you can style each one individually and not as a whole.

For example my code before using Fragment:

Here I was wrapping multiple elements in my <table> to all render to my page. And as soon as I needed to start styling my renderHiking() component into a nice organized grid I hit the wall. Enter Fragment. Fragment is a solves this problem by allowing you to return many elements from a component.


Implementing Fragment!

First you’ll need to upgrade to React@16.2.

Now import Fragment from ‘react’!

Whenever you need to wrap the content of a component and you don’t want to add an extra div or other wrapping element to the DOM, use a Fragment. The content of the component will render as expected but without the wrapping 🎉 🎉. This was very important for when it came time to styling my project because I needed to treat my rendered components as individual’s not wrapped all under a giant wrapper like my <table>. As soon as I added Fragment my nightmare error ended!

I then was able to quickly add a grid to the renderHiking() and renderBeer() and style them differently than my table but all render neatly in one place. Plus not to mention not having to litter the page with insane amount of <div>. I plan to fully use this Fragment feature in all of my future React applications.

Here is an example of my newly styled homepage using the <table> features of Bootstrap, the newly added Bootstrap card grid (Thanks to Fragment!) and now working on styling my Brewery card grid. Thanks React!

Kate Schlunz

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade