CODEWITHSUNDEEP
javascripthtmlreactjsjsxbabeljs
Trump Train
Trump Train

Reputation: 9

Why am I getting "unexpected token" in this snippet of JSX?

I have

    return (
        <p>Sort by:
            <a onClick={this.toggleMenuVisibility}>
                {selectedFilterText} <Chicon className='bubble-trigger-icon' name='downarrow' />
            </a>
        </p>
        { menuIsVisible && this.getMenuItems(productAttributes) }
    );

and am getting the very undescriptive

"Unexpected token"

pointing to the bracket at { menuIsVisible. Any idea what the problem is?

Upvotes: 1

Views: 78

Answers (1)

jamesplease
jamesplease

Reputation: 12869

You can't return two root nodes. You'll need to wrap the <p> and the {} expression in a div, or some other element. Do that and it should work fine.

Source: the docs

As an aside, React's core algorithm is being re-architected right now. The new system, called "Fiber," has many improvements including the ability to do what you're trying to do. As of the time that this post was made (Oct. 2016), Fiber is not available. The last update I heard is that the goal is for Fiber to have feature parity with the existing system by the end of 2016.

Upvotes: 3

Related Questions