how to resolve Adjacent JSX elements must be wrapped in an enclosing tag issue in React

Question

i have business and i'm trying to return business array and i'm using map concept for this and i'm trying add new section when index == 3 also i'm trying to get this result without add parent div. please check my code js fiddle demo

    const business = [
         "business1",
         "business2",
         "business3",
         "business4",
         "business5"
     ]


    class Hello extends React.Component {
      render() {
        return (
          <div>
           {
            business.map((data,index) => {
                return index===3 ? <div>New Section</div><div>{data}</div>:<div>{data}</div>
            })
           }
          </div>
        )
      }
    }

    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );

if i add parent parent div i can able to get result but i would like to achieve result without adding parent div when index === 3 because i cannot achieve my design output when adding parent expected output

 business1
 business2
 business3
 newsection
 business4
 business5

ya i know but adding extra div making some collapse in my design layout thats why i want to achieve without add extra div.. is there any other way? — user200692, Dec 12 '17 at 21:07
In latest version of react you can wrap them in `<>>`, that is empty JSX tags. Latest `react` and latest `babel-preset-react`. — arpl, Dec 12 '17 at 21:12
https://stackoverflow.com/questions/43225239/error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag — Andy, Dec 12 '17 at 21:12
Does this answer your question? [Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag](https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag) — Nikita Skrebets, Jan 03 '22 at 13:42

score 3 · Answer 1 · answered Dec 12 '17 at 21:11

Starting in React 16.2, you can use Fragments. In JSX, you can simply wrap the elements in what looks like an element with an empty name:

<>
  Some text.
  <h2>A heading</h2>
  More text.
  <h2>Another heading</h2>
  Even more text.
</>

~ example from https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html.

If you are using Babel to transpile the code, you may need to use <React.Fragment></React.Fragment> instead of <></>.

score 1 · Answer 2 · answered Dec 12 '17 at 21:11

The error is caused by returning something to React which is not a single element. This is not allowed (at least React < 16.2). You can either work around it in React, but the problem itself is in the business logic.

You can better solve this outside of React. It seems what you want to do is the following:

If the length of the array is less than 3, do nothing
Otherwise, add an element add position 3, pushing the remainder down

The following render would support that

render() {
    const shouldAddElement = companies.length >= 3;
    // We make a copy to prevent us from modifying the original, which is not in the class scope
    const companyCopy = [...companies];
    if(shouldAddElement) {
        companyCopy.splice(3, 0, 'newSection');
    }
    return <div>{totalList}</div>;
}

You can also take a look at How to insert an item into an array at a specific index?

Agreed, fixing the logic itself is the best option. – tech4him Dec 12 '17 at 22:15 — tech4him, Dec 12 '17 at 22:15

torresomar · Accepted Answer · 2017-12-12T21:30:21.227

1

As @tech4him explains you can use fragments, if you are not able to run v16.2, you can try v16.0 fragments which will allow you to get something like this:

   {
    business.map((data,index) => {
        return index===3 
        ? [<div key="A">New Section</div>, <div key="B">{data}</div>]
        : <div>{data}</div>
    })
   }

You can find more info about React v16.0 fragments here

edited Dec 12 '17 at 21:30

answered Dec 12 '17 at 21:15

torresomar

2,219
2
16
28

how to resolve Adjacent JSX elements must be wrapped in an enclosing tag issue in React

3 Answers3