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

This is a very common Reactjs error, specially for beginners. If you are getting this error you code probably looks like this:

class App extends Component {
  render() {
    return (
        <Component1></Component1>
        <Component2></Component2>
    );
  }
}

The problem is that your render function is returning two elements, it’s equivalent to adding two return statements to your function, and reactjs won’t allow that.

The solution is very simple, you just have to add an enclosing tag as described in the error message. After this modification the code should look like this:

class App extends Component {
  render() {
    return (
      <div>
        <Component1></Component1>
        <Component2></Component2>
      </div>
    );
  }
}

As you can see I’ve added a div as an enclosing tag, now the function is returning only one element. This this should fix the problem, but if it doesn’t please let me know in the comments.

Recommended for you

Compiling JSX ReactJS code with Browserify and Reactify This will be a very basic tutorial for those who are just getting to know React, by now you should have noticed that React uses JSX code, which is basically Javascript with some HTML elements. The problem here is that the browser cannot understand JSX, if you have already tried it you probably saw ...
Reacjs Error: The `style` prop expects a mapping from style properties to values, not a string. For ... This error occurs when you try to pass regular CSS strings to the style attribute of an HTML element. In React, the styling is different, instead of an string the style attribute expects an object. So instead of doing this: text you should do this: var pStyle { fontSize: '12px'...
Getting Started with Facebook’s React and Flux ReactJS Homepage React and Flux are two of the most promising technologies of the present days, both are constantly showing up on trending technologies lists, quickly gaining market and becoming popular among developers. The first one defines itself as an open source javascript library for build...
How to use Bootstrap in a Reactjs project Styling is a little bit different in Reactjs, so you cannot use Bootstrap in a traditional way. In this tutorial I'm going to show you an easy way to add Bootstrap to a Reacjs project. As we can't use the traditional Bootstrap we have to use another version called React-Bootstrap, it's basically the...

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>