user938438932 user938438932 - 3 years ago 136
React JSX Question

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>
);

Answer Source

Apparently, you miss the wrapper in conditional statement.

return (
  <div>
    {(this.props.someProp !== undefined) ? 
      <div>
       <Header ..something.. />
       <MyElement
         ...something...
       />
     </div>
       : 
      <card>
        something
      </card>
    }
  </div>
)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download