CODEWITHSUNDEEP
javascriptreactjscomponents
Deadpool
Deadpool

Reputation: 8240

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

I am trying to print props of a react component but getting an error. Please help:

Snippet: 

<!-- DOCTYPE HTML -->
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <script src="http://fb. me/JSXTransformer-0.12.1.js"></script>
    <!-- gap above is intended as else stackOverflow not allowing to post -->
</head>
<body>

    <div id="div1"></div>

    <script type="text/jsx">

        //A component
        var George = React.createClass({
            render: function(){
                return (
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                );
            }
        });

        ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

    </script>
</body>
</html>

I am expecting "Hello Dear!" and then next line "blue". But, I am getting this error instead.

Error:

enter image description here

Upvotes: 6

Views: 9952

Answers (8)

Mayank Shukla
Mayank Shukla

Reputation: 104529

Issue is you are returning more than one html element from render method, here:

return (
      <div> Hello Dear!</div>
      <div>{this.props.color}</div>
);

React v16+ solution:

React 16 included a new element React.Fragment, by help of that we can wrap multiple elements, and no dom node will be created for Fragment. Like this:

return (
      <React.Fragment> 
            Hello Dear!
            <div>{this.props.color}</div>
      </React.Fragment>
);

or return an array:

return ([
            <p key={0}>Hello Dear!</p>
            <div key={1}>{this.props.color}</div>
]);

React v < 16:

Wrap all the elements in a wrapper div, like this:

return (
      <div> 
            Hello Dear!
            <div>{this.props.color}</div>
      </div>
);

Reason: A React component can't return multiple elements, but a single JSX expression can have multiple children, You can only return one node, so if you have, a list of divs to return, you must wrap your components within a div, span or any other component.

One more thing, you need to include the reference of babel also, use this reference in header:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

Check the working example:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <!-- gap above is intended as else stackOverflow not allowing to post -->
</head>
<body>

    <div id="div1"></div>

    <script type="text/jsx">

        var George = React.createClass({
            render: function(){
                return (
                    <div> Hello Dear!
                       <div>{this.props.color}</div>
                    </div>
                );
            }
        });

        ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

    </script>
</body>
</html>

Upvotes: 3

Morris S
Morris S

Reputation: 2604

With React 16 we can return multiple components from render as an array (without a parent div).

return ([
    <div> Hello Dear!</div>,
    <div>{this.props.color}</div>
]);

Upvotes: 3

Chris
Chris

Reputation: 59541

React v16 and later

As of React v16 React components can return an array. This was not possible prior to v16.

Doing this is simple:

return ([  // <-- note the array notation
  <div key={0}> Hello Dear!</div>,
  <div key={1}>{this.props.color}</div>
]);

Note that you need to declare a key for each element of the array. According to official sources, this might become unnecessary in future versions of React, but not as of right now. Also don't forget to separate each element in the array with , as you would normally with an array.

React v15.6 and earlier

React Components can only return one expression, but you are trying to return two <div> elements.

Don't forget that the render() function is exactly that, a function. Functions always take in a number of parameters and always return exactly one value (unless void).

It's easy to forget, but you're writing JSX and not HTML. JSX is just a syntactic sugar for javascript. So one element would be translated as:

React.createElement('div', null, 'Hello Dear!');

This gives a React element, which you can return from your render() function, but you cannot return two individually. Instead you wrap them in another element which have these divs as children.

From the official docs:

Caveat:

Components must return a single root element. This is why we added a <div> to contain all the <Welcome /> elements.

Try wrapping these components in another component so that you only return one:

 //A component
    var George = React.createClass({
        render: function(){
            return (
              <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
              </div>
            );
        }
    });

    ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

Upvotes: 12

Hajji Tarik
Hajji Tarik

Reputation: 1082

In fact your problem is that you try to render several elements at the same time what is not possible in this version of react,

reason render it is a function and by nature a function returns only one value

but with react-fiber you can do what you do, to correct your problem there are two solutions :

Either use a wrapper for both of your elements

    var George = React.createClass ({
         render: function () {
           return (
                <div>
                  <div> Hello Dear! </div>
                  <div> {this.props.color} </div>
                <div>
               );
           }
    });

ReactDOM.render(<George color = "blue" />, document.getElementById ('div1'));

The second solution is to return a array with both of your elements

var George = React.createClass ({
      render: function () {
          return ([
              <div key='0'> Hello Dear! </div>,
              <div key='1'> {this.props.color} </ div>
          ]);
      }
});

ReactDOM.render (<George color = "blue" />, document.getElementById ('div1'));

Upvotes: 1

Nipun Garg
Nipun Garg

Reputation: 680

Enclose everything you are using in return statement inside another div tag.

render: function(){
            return (
                <div>
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                </div>
            );
        }

Upvotes: 1

Isaac Osiemo
Isaac Osiemo

Reputation: 126

The Render function should only return one root element try this

//A component

var George = React.createClass({
        render: function(){
            return (
                <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
                </div>
            );
        }
    });

Upvotes: 1

Michal Cholewiński
Michal Cholewiński

Reputation: 464

return (  <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
         </div>
            );

Hi, elements inside return should be wrapped by something. Just add as shown above and should work ;)

Upvotes: 1

Abdullah Mohammad Motiullah
Abdullah Mohammad Motiullah

Reputation: 12592

Wrap your returning DOM in a single html element.

Try this

return (
    <div>            
        <div> Hello Dear!</div>     
        <div>{this.props.color}</div>
    </div>     
);

Upvotes: 1

Related Questions