Adjacent JSX elements must be wrapped error

[davidhariri]

I don't see anything wrong with the first two lines of this, but the JSX transformer seems to... When I remove the first two <div>'s everything works fine. Can someone explain to me what's going on?

<div className="screen-width header__image"></div>
<div className="screen-width header__tint"></div>
<div className="page-width header__content">
    <ul className="navigation header__content__navigation">
        <li className="navigation__link header__content__navigation__link" onClick={this.route.bind(null, '/')}>New</li>
        <li className={`navigation__link${hidden} header__content__navigation__link`}>Inbox</li>
    </ul>
    <button className={`button__text${signupHidden} header__content__button--sign-up`}>Sign Up</button>
    <div className="header__content__user">
        <HeaderAvatar user={this.props.user} />
        <CreateButton user={this.props.user} />
    </div>
</div>

[waldreiter]

I don't see nothing wrong either. Maybe surrounding your jsx with another <div> will fix your problem? Your code produces 3 values. If you use it in a place that can only handle one value, for example as return value in render(), then you get an error.

If this is not your problem, then please explain what you mean with "…".

[quantizor]

If that code is the return of the root render() method of your component, then yes it needs an additional container element. There are a few issues open to track ways of rendering without a single root node, but they're not in yet.

[zpao]

I love when other people say what I would have, thanks @cody & @yaycmyk. #2127 is an issue to follow if you're interested in the return case.

FWIW, the error that you should have seen from both react-tools and babel say that adjacent JSX elements aren't allowed and must be wrapped.

Closing out since this seems solved but we can reopen if there's a React issue somewhere. In the future, Stack Overflow is an excellent place for support questions (though I can understand suspecting a bug in this case).

[davidhariri]

Thanks @zpao @yaycmyk @cody This was a combo of not understanding how the .render() method operated on the template and a vague error message returned from Babel. Keep up the great work! Can't wait for 1.0!

[slorber]

@davidhariri don't hesitate to enhance babel if the error message is not clear enough, it will help others too :)

[Kroniac]

React render only one element. You need enclose all the elements(if more than one) in a single tag. Like in case:
//opening div element (div)

Your Code

//closing div element(/div)

i.e; all the elements are enclosed in a single div element, making it a single element as a whole for REact to render.

this should work for you.