How can render JSX elements with conditional statement?

Question

I want to render html elements if the data is loaded.

render() {
  return (
    <div>
      ...
    { this.state.isLoaded ?
     (
        <ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} />
     )
   }
  </div>
);

But this shows an error as below.

SyntaxError: this is a reserved word (60:35)

The 60th line is

<ReviewShortIntro review={{this.state.mainReview}} />

Without conditional flag (in the code, this.state.isLoaded), i have to check all properties of review is undefined or not.

I am not familiar with react.

What is my best way for resolve problem?

I think that you should write <ReviewShortIntro review={this.state.mainReview} /> — Yossi
– Yossi, Commented Sep 18, 2018 at 16:11

MrCode · Accepted Answer · 2018-09-18 16:21:16Z

1

Your ternary operator is incomplete, you only have the left side. You're missing the : null part.

You need to wrap multiple elements in a parent element so that you only return a single element. For example, wrapped in a <div>:

render() {
  return (
    <div>
      ...
    { this.state.isLoaded ?
     (
        <div><ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} /></div>
     ) : null
   }
  </div>
);

answered Sep 18, 2018 at 16:21

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gazdagergo · Accepted Answer · 2018-09-19 06:12:31Z

1

According to the documentation use the && operator and you should wrap it in a single element. I recommend to use Fragment which do not generate unnecessary dom elements:

import React, { Fragment } from 'react';

render() {
  return (
    <div>
      ...
    {this.state.isLoaded && (
       <Fragment>
         <ReviewShortIntro review={this.state.mainReview} />
         <div className="clear" />
         <div className="section-title"></div>
         <ReviewList reviews={this.state.reviews} />
       </Fragment>
     )
   }
  </div>
);

edited Sep 19, 2018 at 6:12

answered Sep 18, 2018 at 16:21

gazdagergo

6,7811 gold badge36 silver badges50 bronze badges

Comments

4 revs · Accepted Answer · 2018-09-18 16:31:18Z

Replace this:

<ReviewShortIntro review={{this.state.mainReview}} />

With this:

<ReviewShortIntro review={this.state.mainReview} />

However, I couldn't see using {{}} inside the post, but just seeing in your error message. Thus, you need to confirm you're using this.state.mainReview inside single curly brace.

The double curly brace means you're defining an object. And object has key:value pair. So, using {{this.state.mainReview}} will cause you such error as there's no such key:value pair.

Though, it might be a typo rather in your code. Just answered to inform that calling a function or whatever the state should be wrapped inside a single curly brace.

Ah and yes, your ternary operator is incomplete. Use && operator or complete the ternary operator:

{ this.state.isLoaded ?
     (
        <ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} />
     ) : ''
   }

Collectives™ on Stack Overflow

How can render JSX elements with conditional statement?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related