JSX expressions must have one parent element with conditional expression

Question

I am using the curly brackets to include a javascript expression but whenever I include the curly brackets it gives out an error: JSX expressions must have one parent element. I think it has to do with my VSCODE. I have gone through similar problems with the same error but I can't find a solution. Is there a way around it...

render () {
 return (
  <div className="App">
    <Particles className='particles'params={ particlesOptions }/>

    <Navigation />
      { this.state.route === 'route'
        ? <Signin />  
        : <Logo />
          <Rank />

          <ImageLinkForm 
            onInputChange={ this.onInputChange }
            onButtonSubmit={ this.onButtonSubmit }
          />

          <FaceRecognition box={ this.state.box } imageUrl={ this.state.imageUrl }/>
      }
  </div>
);

}

You have to wrap ` ...` in another element. – Felix Kling Jan 06 '20 at 23:57 — Felix Kling, Jan 06 '20 at 23:57
Thank you, Emile and Felix, it worked. And I understand. – Mbiplang Ardel Jan 07 '20 at 06:45 — Mbiplang Ardel, Jan 07 '20 at 06:45

score 1 · Accepted Answer · answered Jan 06 '20 at 23:57

When your JSX expression has multiple elements at the 'top level' that are 'siblings' like you do here, you need to wrap all the JSX with <> at the beginning and </> at the end. This is called a Fragment, and it's needed just because of how JSX is defined and parsed. In your case, the Logo Rank ImageLinkForm FaceRecognition expression needs to be wrapped in a fragment.

BTW - some older answers use <React.Fragment>, but nowadays you can use <> and </>

Thank you Noam Bendelac, it worked and I understand. – Mbiplang Ardel Jan 07 '20 at 06:44 — Mbiplang Ardel, Jan 07 '20 at 06:44

JSX expressions must have one parent element with conditional expression

1 Answers1