Skip jsx's div wrapping in map

Question

I have an array object that used this component to display a UI. I have a problem, my style broke because of an extra .

<ul className="dropdown-menu">
    {map(listItems, (obj,i) => 
        <li key={i} onClick={e => dropdownHandler(obj.handlerName)}>
          {obj.visible && <div>
                  <a>
                    {obj.iconClasses && 
                        <i className={obj.iconClasses}></i>
                    }
                    {obj.name}
                  </a>
                  <div key={i} className={classnames({'divider':obj.divider})}></div>
              </div>
          }
        </li>
    )}
</ul>

In the line of {obj.visible .. what else can I do? I do not want to include a div.

so basically you want to display the and the
without wrapping them in a
? — , May 12 '17 at 08:07

Mayank Shukla · Answer 1 · 2017-05-12T08:29:03.147

0

To put the condition inside JSX, we can use the ternary operator, like this:

{1==1 ? <div> hello </div> : null}

Return null if you don't want to render anything when condition fails.

Use this:

<li key={i} onClick={e => dropdownHandler(obj.handlerName)}>
      {obj.visible ? 
           <a>
              {obj.iconClasses && 
                   <i className={obj.iconClasses}></i>
              }
              {obj.name}
           </a>
       : null}
       {obj.visible ? 
           <div key={i} className={classnames({'divider':obj.divider})}></div>
       : null}
</li>

edited May 12 '17 at 08:29

answered May 12 '17 at 08:11

Mayank Shukla

100,735
18
158
142

the div is there too, what's the different? – Alan Jenshen May 12 '17 at 08:25
sorry, forgot to break that part, check the updated answer. – Mayank Shukla May 12 '17 at 08:29
You can use React.Children.only(), checkout the documentation – Lionel Dcosta May 12 '17 at 09:22

score 0 · Accepted Answer · edited May 23 '17 at 11:47

You can simply use two conditionals and omit the wrapping element:

<li key={i} onClick={e => dropdownHandler(obj.handlerName)}>
  {obj.visible &&
    <a>
      {obj.iconClasses && 
        <i className={obj.iconClasses}></i>
      }
      {obj.name}
    </a>
  }
  {obj.visible &&
    <div key={i} className={classnames({'divider':obj.divider})}></div>
  }
</li>

Furthermore using array indexes as keys is an anti-pattern. You should use some business keys instead. More info in this answer.

score 0 · Answer 3 · answered May 12 '17 at 08:19

One of the shortcomings of React is that you need to wrap every block in a single container. They are working on the solution, but it might take a while. In the meantime, the simplest way to skip the extra <div in your case is to do the check for both elements under it separately:

{obj.visible &&
  <a>
    {obj.iconClasses && 
      <i className={obj.iconClasses}></i>
    }
    {obj.name}
  </a>
{obj.visible && <div key={i} className={classnames({'divider':obj.divider})}></div>}

Skip jsx's div wrapping in map

3 Answers3