Failed to compile, Unexpected token if in ReactJS

Question

I cant seem to get this simple function to work basically my markup is like so(simplified)

{ loading || Object.keys(product).length <= 0 ? 'loading' :
  <div>
    {if(){

    }}
    <ProductPictureWidget mainPic={product.pic_url} />
    <ProductOptionsWidget product={product} activeProps={activeProps} selectProductOption={this.selectProductOption}/>
  </div>
}

But this leaves me with SyntaxError: Unexpected token on my if statement

What exactly am I doing wrong here am I not allowed to do if statements within my shorthand if statement?

Ross Allen · Accepted Answer · 2017-03-09 04:35:56Z

3

JSX only allows expressions, not statements. The ternary operator is an expression. if starts an if statement. You can see why an if statement wouldn't work by looking at the compiled JavaScript (with the if statement removed):

{
  loading || Object.keys(product).length <= 0 ? 'loading' : React.createElement(
    'div',
    null,
    React.createElement(ProductPictureWidget, { mainPic: product.pic_url }),
    React.createElement(ProductOptionsWidget, { product: product, activeProps: activeProps, selectProductOption: undefined.selectProductOption })
  );
}

JSX amounts to function calls and object declarations. If the if statement were compiled, it would yield invalid JavaScript:

{
  loading || Object.keys(product).length <= 0 ? 'loading' : React.createElement(
    'div',
    null,
    if(){ }, // This is **invalid** JavaScript!!
    React.createElement(ProductPictureWidget, { mainPic: product.pic_url }),
    React.createElement(ProductOptionsWidget, { product: product, activeProps: activeProps, selectProductOption: undefined.selectProductOption })
  );
}

answered Mar 9, 2017 at 4:35

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

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

2 Comments

NooBskie Over a year ago

So to accomplish this I would have to remove the ternary operator completely and just write it as a if else statement right?

Ross Allen Over a year ago

You can assign the conditionally-rendered component to a variable and reference the variable in the JSX or follow a pattern like in Shubham Khatri's answer.

Shubham Khatri · Accepted Answer · 2017-06-20 08:57:46Z

JSX doesn't allow if statement within the return function. But you are allowed to use ternary expressions

{ loading || Object.keys(product).length <= 0 ? 'loading' :
  <div>
    {(condition here)? <div>Hello World</div>: null}
    <ProductPictureWidget mainPic={product.pic_url} />
    <ProductOptionsWidget product={product} activeProps={activeProps} selectProductOption={this.selectProductOption}/>
  </div>
}

However if you want to make use of if statement there is an alternative way to do it, i.e to call a function within which you use the if-else statements

conditionalRender() {
   if(condition) {
      return <div>Hello</div>
   } else {
      return null
  }
}

{ loading || Object.keys(product).length <= 0 ? 'loading' :
  <div>
    {this.conditionalRender()}
    <ProductPictureWidget mainPic={product.pic_url} />
    <ProductOptionsWidget product={product} activeProps={activeProps} selectProductOption={this.selectProductOption}/>
  </div>
}

Collectives™ on Stack Overflow

Failed to compile, Unexpected token if in ReactJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related