Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Question

I am trying to set up my React.js app so that it only renders if a variable I have set is true.

The way my render function is set up looks like:

render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
    <div>

if(this.state.submitted==false) 
{

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>
}
   </div>
    )
  },

Basically, the important portion here is the if(this.state.submitted==false) portion (I want these div elements to show up when the submitted variable is set to false).

But when running this, I get the error in the question:

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

What is the issue here? And what can I use to make this work?

http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer The other people here are just telling you to use a parent element, but that may be unnecessary. This older version of your question has an interesting answer using arrays. — Meow, May 11 '16 at 10:11

score 777 · Answer 1 · edited May 07 '20 at 06:47

777

You should put your component between an enclosing tag, Which means:

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

Instead:

// Correct

return (
    <div>
       <Comp1 />
       <Comp2 />
    </div>
)

Edit: Per Joe Clay's comment about the Fragments API

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

return (
    <>
       <Comp1 />
       <Comp2 />
    </>
)

edited May 07 '20 at 06:47

beaver

523
1
9
20

answered Oct 28 '15 at 08:11

wdanxna

10,699
2
23
24

7

What if I'm printing 2 rows together in a table. How can I wrap ? – Jose Jun 05 '18 at 03:38
1

@Jose you can use the Fragments API as shown in the answer, they don't produce any extra DOM elements. – jtsalva Jul 20 '21 at 09:16

score 295 · Answer 2 · edited Dec 29 '21 at 19:49

It is late to answer this question but I thought It will add to the explanation.

It is happening because any where in your code you are returning two elements simultaneously.

e.g

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

It should be wrapped in a parent element. e.g

 return(
      <div id="parent">
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

More Detailed Explanation

Your below jsx code get transformed

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

into this

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
      );
    }
  }]);

But if you do this

class App extends React.Component {
  render(){
    return (
        <h1>Welcome to React</h1>
        <div>Hi</div>
    );
  }
}

this gets converted into this (Just for illustration purpose, actually you will get error : Adjacent JSX elements must be wrapped in an enclosing tag)

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
       'Hi'
      ); 
    return React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
    }
  }]);

In the above code you can see that you are trying to return twice from a method call, which is obviously wrong.

Edit- Latest changes in React 16 and own-wards:

If you do not want to add extra div to wrap around and want to return more than one child components you can go with React.Fragments.

React.Fragments (<React.Fragments>)are little bit faster and has less memory usage (no need to create an extra DOM node, less cluttered DOM tree).

e.g (In React 16.2.0)

render() {
  return (
    <>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </>
  );
}

or

render() {
  return (
    <React.Fragments>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </React.Fragments>
  );
}

or

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

score 122 · Answer 3 · edited Nov 25 '18 at 22:06

React element has to return only one element. You'll have to wrap both of your tags with another element tag.

I can also see that your render function is not returning anything. This is how your component should look like:

var app = React.createClass({
    render () {
        /*React element can only return one element*/
        return (
             <div></div>
        )
    }
})

Also note that you can't use if statements inside of a returned element:

render: function() {
var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    if(this.state.submitted==false) {
        return <YourJSX />
    } else {
        return <YourOtherJSX />
    }
},

this doesn't address the issue with the "if"; If I remove the "if" within the render function, it works fine. — user1072337, Jul 08 '15 at 23:09
note that you can't use if statments inside of a retuned element. look at my updated answer — Matan Gubkin, Jul 09 '15 at 04:38

score 102 · Answer 4 · edited Aug 13 '19 at 21:01

102

If you don't want to wrap it in another div as other answers have suggested, you can also wrap it in an array and it will work.

// Wrong!
return (  
   <Comp1 />
   <Comp2 />
)

It can be written as:

// Correct!
return (  
    [<Comp1 />,
    <Comp2 />]
)

Please note that the above will generate a warning: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

This can be fixed by adding a key attribute to the components, if manually adding these add it like:

return (  
    [<Comp1 key="0" />,
    <Comp2 key="1" />]
)

Here is some more information on keys:Composition vs Inheritance

edited Aug 13 '19 at 21:01

Edgar

6,022
8
33
66

answered May 10 '16 at 07:35

Neal

3,119
4
27
32

The "correct" way here warns: `Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'ContentContainer'.` – janhartmann May 18 '16 at 08:03
You can simply add a key to the components to avoid this warning. Check here http://facebook.github.io/react/docs/multiple-components.html#dynamic-children – Neal May 18 '16 at 09:34
7

I tried this and it gives me an error. A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. – prasadmsvs May 26 '16 at 18:40
3

@prasadmsvs +1 invariant.js:39 Uncaught Invariant Violation: CommitFilter.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. – Svetlana Ivanova Jun 04 '16 at 07:45
1

This is a great solution for times where you need/want to avoid a wrapper element! – bloudermilk Oct 28 '16 at 17:49
I still find it weird that react couldn't find a way to implement their framework without allowing multiple adjacent elements being returned from any given function. Makes for awkward coding at times, and I don't agree that wrapper elements are "fine". When coding vanilla html/js/css, they are hacks to get the desired behavior not otherwise possible and are not semantic html. – aaaaaa Dec 20 '16 at 03:44
2

@aaaaaa it is not possible because of the way the current React reconciler works. It is a stack and reconciliation is done recursively. In React 16 this is fixed, and you may now return an array. – natnai Mar 01 '17 at 12:57
@natnai - interesting. thanks much for giving me a direction on where to look to read further – aaaaaa Mar 01 '17 at 15:43
1

https://github.com/iamdustan/tiny-react-renderer is an excellent repository that every react developer should read. Once you do, it should become immediately apparent to you why the current implementation of react doesn't allow returning multiple children. – natnai Mar 01 '17 at 15:45
This is super helpful, especially when you're generating an Array of Components dynamically. You can use something like `arrayOfComponents = [];` and then `arrayOfComponents.push( );` to append to it. Thanks. – Joshua Pinter Mar 14 '17 at 01:37
Perhaps I'm missing something, but I really don't understand why this got 41 up-votes. A component must return **one** react component. Returning an array is not a valid return type - the error even says so: *A valid React element (or null) must be returned. You may have returned undefined, **an array** or some other invalid object.*. The only place I know you can do this is ***within*** a react-component... returning an array is a feature for React v16. Downvoting this because it seems incorrect to me - I'll happily undo if I'm proved wrong. – Chris Jun 21 '17 at 13:29
@Chris Nothing in this solution says anything about rendering a component. This solution works perfectly well for encapsulating children elements in an external function for use inside of an existing outer element. In fact it is the only viable solution in some cases (e.g. ,
etc.)

pscl

Sep 08 '17 at 19:59

@user1628461, the whole question is about an error which can only be generated from components. – Chris Sep 08 '17 at 20:02

1

Adjacent tags in JSX are parsed into an array - perfectly normal. The OP is only getting an error because his if() block breaks up the JSX parser causing it to expect a single outer element. In fact, encapsulating the if() block in a helper function returning an array is the more elegant way of addressing the question. This works in React <=15. React 16 simply eliminates the need for boilerplate square brackets and commas. – pscl Sep 09 '17 at 05:28

@pscl, I don't quite follow. Are you saying you can return arrays from the render method in React <=15? – Chris Oct 27 '17 at 07:37

1

Very helpful for me in my TABLE situation, where wrapping els in a div isn't allowed. – Scott Dec 13 '17 at 17:22

Chris · Answer 5 · 2017-12-07T09:54:33.363

The problem

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

This means that you are trying to return multiple sibling JSX elements in an incorrect manner. Remember that you are not writing HTML, but JSX! Your code is transpiled from JSX into JavaScript. For example:

render() {
  return (<p>foo bar</p>);
}

will be transpiled into:

render() {
  return React.createElement("p", null, "foo bar");
}

Unless you are new to programming in general, you already know that functions/methods (of any language) take any number of parameters but always only return one value. Given that, you can probably see that a problem arises when trying to return multiple sibling components based on how createElement() works; it only takes parameters for one element and returns that. Hence we cannot return multiple elements from one function call.

So if you've ever wondered why this works...

render() {
  return (
    <div>
      <p>foo</p>
      <p>bar</p>
      <p>baz</p>
    </div>
  );
}

but not this...

render() {
  return (
    <p>foo</p>
    <p>bar</p>
    <p>baz</p>
  );
}

it's because in the first snippet, both <p>-elements are part of children of the <div>-element. When they are part of children then we can express an unlimited number of sibling elements. Take a look how this would transpile:

render() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "foo"),
    React.createElement("p", null, "bar"),
    React.createElement("p", null, "baz"),
  );
}

Solutions

Depending on which version of React you are running, you do have a few options to address this:

Use fragments (React v16.2+ only!)

As of React v16.2, React has support for Fragments which is a node-less component that returns its children directly.

Returning the children in an array (see below) has some drawbacks:
- Children in an array must be separated by commas.
- Children in an array must have a key to prevent React’s key warning.
- Strings must be wrapped in quotes.
These are eliminated from the use of fragments. Here's an example of children wrapped in a fragment:
```
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
```
which de-sugars into:
```
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
```
Note that the first snippet requires Babel v7.0 or above.
Return an array (React v16.0+ only!)

As of React v16, React Components can return arrays. This is unlike earlier versions of React where you were forced to wrap all sibling components in a parent component.

In other words, you can now do:
```
render() {
  return [<p key={0}>foo</p>, <p key={1}>bar</p>];
}
```
this transpiles into:
```
return [React.createElement("p", {key: 0}, "foo"), React.createElement("p", {key: 1}, "bar")];
```
Note that the above returns an array. Arrays are valid React Elements since React version 16 and later. For earlier versions of React, arrays are not valid return objects!

Also note that the following is invalid (you must return an array):
```
render() {
  return (<p>foo</p> <p>bar</p>);
}
```
Wrap the elements in a parent element

The other solution involves creating a parent component which wraps the sibling components in its children. This is by far the most common way to address this issue, and works in all versions of React.
```
render() {
  return (
    <div>
      <h1>foo</h1>
      <h2>bar</h2>
    </div>
  );
}
```
Note: Take a look again at the top of this answer for more details and how this transpiles.

on React `v16.4` the first example does not work using: `<>`, only `` :( — vsync, Jul 16 '18 at 10:10
@vsync the support for that syntax varies on your building environment. Not sure if babel supports it yet, and if so, which version. — Chris, Jul 16 '18 at 10:17
@Chris - Thanks. I tried it on *Codepen* with the native *Babel* checkbox toggled — vsync, Jul 16 '18 at 10:19

Morris S · Answer 6 · 2022-05-31T02:08:42.340

26

React 16.0.0 we can return multiple components from render as an array.

return ([
    <Comp1 />,
    <Comp2 />
]);

React 16.2.0 > we can return multiple components from render in a Fragment tag. Fragment

return (
<React.Fragment>
    <Comp1 />
    <Comp2 />
</React.Fragment>);

React 16.2.0 > you can use this shorthand syntax. (some older tooling versions don’t support it so you might want to explicitly write <Fragment> until the tooling catches up.)

return (
<>
    <Comp1 />
    <Comp2 />
</>)

edited May 31 '22 at 02:08

answered Sep 20 '17 at 16:00

Morris S

2,337
25
30

1

You forgot a `,` between the components. It's an array so you need to separate each element within it. – Chris Oct 27 '17 at 07:29
There's no ``, it's ``. says so in your own link – vsync Jul 16 '18 at 10:17
2

If you are destructuring `import React { Fragment } from 'react';` then you use it like this `` – Morris S Jul 16 '18 at 20:29

score 7 · Answer 7 · answered Apr 17 '19 at 09:42

7

If you do not wrap your component then you can write it as mentioned below method.

Instead of:

return(
  <Comp1 />
  <Comp2 />
     );

you can write this:

return[(
 <Comp1 />
),
(
<Comp2 />
) ];

answered Apr 17 '19 at 09:42

ronak ganatra

79
1
1

score 7 · Answer 8 · edited May 14 '19 at 07:04

7

it's very simple we can use a parent element div to wrap all the element or we can use the Higher Order Component( HOC's ) concept i.e very useful for react js applications

render() {
  return (
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

or another best way is HOC its very simple not very complicated just add a file hoc.js in your project and simply add these codes

const aux = (props) => props.children;
export default aux;

now import hoc.js file where you want to use, now instead of wrapping with div element we can wrap with hoc.

import React, { Component } from 'react';
import Hoc from '../../../hoc';

    render() {
      return (
    <Hoc>
        <div>foo</div>
        <div>bar</div>
    </Hoc>
      );
    }

edited May 14 '19 at 07:04

Shanteshwar Inde

1,438
4
17
27

answered May 14 '19 at 06:29

Fazal

99
1
6

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.[Read this](https://stackoverflow.com/help/how-to-answer). – Shanteshwar Inde May 14 '19 at 06:46
The functionality that you are talking about, i.e called HOC in reactjs. means props.children – Fazal Jun 11 '20 at 07:25

score 4 · Answer 9 · answered Apr 02 '19 at 12:38

4

There is a rule in react that a JSX expression must have exactly one outermost element.

wrong

const para = (
    <p></p>
    <p></p>
);

correct

const para = (
    <div>
        <p></p>
        <p></p>
    </div>
);

answered Apr 02 '19 at 12:38

Khandelwal-manik

353
3
13

score 1 · Answer 10 · edited Jun 28 '18 at 06:32

React 16 gets your return as an array so it should be wrapped by one element like div.

Wrong Approach

render(){
    return(
    <input type="text" value="" onChange={this.handleChange} />

     <button className="btn btn-primary" onClick=   {()=>this.addTodo(this.state.value)}>Submit</button>

    );
}

Right Approach (All elements in one div or other element you are using)

render(){
    return(
        <div>
            <input type="text" value="" onChange={this.handleChange} />

            <button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
        </div>
    );
}

score 1 · Answer 11 · answered Dec 14 '18 at 06:50

1

React components must wrapperd in single container,that may be any tag e.g. "< div>.. < / div>"

You can check render method of ReactCSSTransitionGroup

answered Dec 14 '18 at 06:50

Shivprasad P

67
5

score 0 · Answer 12 · answered Sep 03 '17 at 21:55

0

Import view and wrap in View. Wrapping in a div did not work for me.

import { View } from 'react-native';
...
    render() {
      return (
        <View>
          <h1>foo</h1>
          <h2>bar</h2>
        </View>
      );
    }

answered Sep 03 '17 at 21:55

Ocko

1,851
1
9
4

2

thats because you are using react native. – Nick Hingston May 04 '18 at 08:17
And fragments are also available in React Native, so a `View` is not really the best solution. – Emile Bergeron May 28 '20 at 02:00

score 0 · Answer 13 · answered Sep 29 '18 at 04:11

Invalid: Not only child elements

render(){
        return(
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        )
    }

Valid: Root element under child elements

render(){
        return(
          <div>
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
          </div>
        )
    }

Please avoid "me too" type answers or repeating the same solution, unless you have something relevant to _add_ to it. — Emile Bergeron, May 28 '20 at 02:01

score 0 · Answer 14 · edited Aug 25 '20 at 16:52

0

Just add

<>
  // code ....
</>

edited Aug 25 '20 at 16:52

MiniGod

3,683
1
26
27

answered Aug 25 '20 at 16:28

Omry

1

score -1 · Answer 15 · answered Jun 27 '19 at 12:31

For Rect-Native developers. I encounter this error while renderingItem in FlatList. I had two Text components. I was using them like below

renderItem = { ({item}) => 
     <Text style = {styles.item}>{item.key}</Text>
     <Text style = {styles.item}>{item.user}</Text>
}

But after I put these tow Inside View Components it worked for me.

renderItem = { ({item}) => 
   <View style={styles.flatview}>
      <Text style = {styles.item}>{item.key}</Text>
      <Text style = {styles.item}>{item.user}</Text>
   </View>
 }

You might be using other components but putting them into View may be worked for you.

Fragments are also available in React Native, so a `View` is not really the best solution. — Emile Bergeron, May 28 '20 at 02:00

score -1 · Answer 16 · answered Feb 04 '20 at 10:25

I think the complication may also occur when trying to nest multiple Divs within the return statement. You may wish to do this to ensure your components render as block elements.

Here's an example of correctly rendering a couple of components, using multiple divs.

return (
  <div>
    <h1>Data Information</H1>
    <div>
      <Button type="primary">Create Data</Button>
    </div>
  </div>
)

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

16 Answers16

The problem

Solutions

Use fragments (React v16.2+ only!)

Return an array (React v16.0+ only!)

Wrap the elements in a parent element

Linked

Related