0

Hello I'am trying to render the JSX from my component dynamically, some object from my database have other variables then others. I only want to render the HTML elements when the needed Data is provided. But this i causing me this problem:

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (202:38)

. I know it for sure the JSX elements are all closed. I think it is because it is an If statement inside an if statement. thank you in advance for your help.

<div>
     {this.state.loading ?(
       <div className="wrapper">
        <Navbar/>
        <Body>
        {this.state.snap.someValue ?
          (<div className="detailsCategory col-sm-5 col-md-5">
             Heading
           </div>
           <div className="col-sm-5 col-md-5">
             <p>{this.state.snap.childValue}</p>
           </div>):(null)}
        </Body>
       </div>)
       :
       (<h1> LOADING... </h1>)}
</div>
HarryTgerman
  • 107
  • 1
  • 5
  • 19
  • 2
    *'this is causing me a problem'* - Please tell us what said problem is! Is there a console error? Are the results not what you expected? Without that kind of detail, it's impossible for people to figure out the issue. – Joe Clay Apr 11 '18 at 13:19
  • i have updated it – HarryTgerman Apr 11 '18 at 13:23
  • Possible duplicate of [Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag](https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag) - to summarize, you can't have multiple JSX tags next to each other at the root of an expression. They need to be wrapped in another tag - the linked answer suggests using a `div`, but the [fragment API](https://reactjs.org/docs/fragments.html) is a more up-to-date solution. – Joe Clay Apr 11 '18 at 13:24

0 Answers0