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, Mar 12 '20 at 18:51
Are you sure you want to create a new list for each item inside of `dropdownItem`? — goto, Mar 12 '20 at 18:52
Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Emile Bergeron, Mar 12 '20 at 19:03

score 1 · Accepted Answer · answered Mar 12 '20 at 18:53

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>

Conditional jsx on react Js

1 Answers1