Why this React return code is invalid? (Conditional rendering)

Question

I want to understand why the compiled version of this code is invalid

<Fragment>
  {listData.list.description && (
    <div>
      <div dangerouslySetInnerHTML={{ __html: list.description }} />
      {hasTopCollection && <ImageAttribution />}
    </div> 
       // ^ ) expected
    {list.listOptions.brandHeaderType === 20 && <SomeComponent />}
 // ^ Parsing error: Unexpected token, expected ","
  )}
</Fragment>

I had this listData.list.description && <Description> component in a parent component, but now I want to move this logic into the actual <Description> component.

So before this was like this:

<Fragment>
    <div>
      <div dangerouslySetInnerHTML={{ __html: list.description }} />
      {hasTopCollection && <ImageAttribution />}
    </div>
    {list.listOptions.brandHeaderType === 20 && <SomeComponent />}
</Fragment>

@DedaDev actually the fragment is used to group more than one component — JorgeeFG
– JorgeeFG, Commented Aug 6, 2020 at 18:54
I think it is the double curly, you cant have curly inside curly, brackets behave as a new component. — DedaDev
– DedaDev, Commented Aug 6, 2020 at 18:57

David · Accepted Answer · 2020-08-06 18:58:27Z

1

The <Fragment> now only has one child, so it isn't really needed. However, inside the parentheses you have two things. And parentheses alone aren't sufficient to group children, so a <Fragment> can be used there in their place:

{listData.list.description &&
  <Fragment>
    <div>
      <div dangerouslySetInnerHTML={{ __html: list.description }} />
      {hasTopCollection && <ImageAttribution />}
    </div> 
    {list.listOptions.brandHeaderType === 20 && <SomeComponent />}
  </Fragment>}

answered Aug 6, 2020 at 18:58

David

221k42 gold badges245 silver badges337 bronze badges

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

Collectives™ on Stack Overflow

Why this React return code is invalid? (Conditional rendering)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related