Conditional jsx on react Js

Question

Hi I'm trying to render the following with a condition, but I'm not getting it for some reason: Parsing error: Unexpected token, expected ","

in my {dropdownItem.map (item => (

<NavLi>
  <Link to={link}>{name}</Link>
  {visibleMenu[name] && dropdownItem &&
  (
    {dropdownItem.map(item=>(
      <ul>
        <li>
          {item}
        </li>
      </ul>
    ))
    }
  )
  }
</NavLi>

I don't know what's wrong with my structure

{visibleMenu[name] && dropdownItem && dropdownItem.map ... } — HMR
– HMR, Commented Mar 12, 2020 at 18:51
Are you sure you want to create a new list for each item inside of dropdownItem? — goto
– goto, Commented Mar 12, 2020 at 18:52
Does this answer your question? if-else statement inside jsx: ReactJS — Emile Bergeron
– Emile Bergeron, Commented Mar 12, 2020 at 19:03

azium · Accepted Answer · 2020-03-12 18:53:13Z

1

You have extra curly braces in your JSX. Once you open up { to tell the JSX that you want to evaluate an expression you don't need to open another one.

<NavLi>
  <Link to={link}>{name}</Link>
  {visibleMenu[name] && dropdownItem &&
    dropdownItem.map(item => (
      <ul>
        <li>
          {item}
        </li>
      </ul>
    ))
  }
</NavLi>

answered Mar 12, 2020 at 18:53

azium

20.7k8 gold badges63 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

Conditional jsx on react Js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related