CODEWITHSUNDEEP
reactjsjsx
user938438932
user938438932

Reputation: 55

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

I have following return statement thats giving error Adjacent JSX elements must be wrapped in an enclosing tag Any idea what is wrong?

return (
      <div>
       {(this.props.someProp !== undefined) ? (    
        <Header ..something.. />
        <MyElement
         ...something...
        />
      ) : (
        <card>
        </card>
      )}
      </div>
    );

Upvotes: 0

Views: 2485

Answers (2)

Nalan Madheswaran
Nalan Madheswaran

Reputation: 10572

React element has to return only one element.

Do this

return (
    <div>
       <Card1 />
       <Card2 />
    </div>
)

Instead

return (  
    <Card1 />
    <Card2 />
)

Upvotes: 3

Vipul Singh
Vipul Singh

Reputation: 646

Apparently, you miss the wrapper in conditional statement.

return (
  <div>
    {(this.props.someProp !== undefined) ? 
      <div>
       <Header ..something.. />
       <MyElement
         ...something...
       />
     </div>
       : 
      <card>
        something
      </card>
    }
  </div>
)

Upvotes: 1

Related Questions