How can I add multiple static html elements before the div class='App' in react?

Question

I need to add 3 empty divs before the of my reactjs web page for special styling reasons, but I get an error if I do that:

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

What I need is

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div class='App'> 
...
</div>

Answer 1

You are getting this error because you are trying to return multiple JSX elements which is not how React works

You are trying to do this:

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div class='App'> 
...
</div>

But react will expect that you return single div with all the elemets inside, so pretty much all you need to do is to wrap them all in one div like this:

<div>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div class='App'> 
    ...
    </div>
</div>

Answer 2

Your error message contains the details you need:

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

This means you need to wrap your elements in a JSX fragment , like so:

<>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div class='App'> 
    ...
  </div>
</>

Note that <>...</> is simply shorthand for <React.Fragment>...</React.Fragment> .