Javascript 如何在react jsx元素中的div上添加条件

我有一个jsx结构，它看起来像

在这里，我为div元素添加了

item.hideon

。但我想做的是

 <div className={css.maincon}>
        {switchItems.map(item => (
          { !item.hideOn &&  <div key={item.id} className={css.toggle}>
              <span className={css.toggleLabel}>{item.uncheckedValue}</span>
              <span>
                <Switch
                  key={`${item.id}-switch`}
                  name={item.id}
                  checked={item.isChecked}
                  onChange={e => handleChange(e, item.id)}
                  defaultChecked
                  color='default'
                />
              </span>
              <span className={css.toggleLabel}>{item.checkedValue}</span>              
          </div> }
        ))}
      </div>

{switchItems.map（项=>(
{！item.hideOn&&
{item.uncheckedValue}
handleChange（e，item.id）}
默认检查
color='default'
/>
{item.checkedValue}
}
))}

这里尝试在整个div本身上添加hideOn。当我尝试这样做时，我得到一个编译时错误

：“预期的
不确定为什么会发生这种情况。有人能帮我吗

谢谢。
首先，您可以尝试删除map函数中的花括号{}。它已经返回，您可以检查一个语句作为！项目1.hideOn

试着去掉尖括号

{switchItems.map(item => (
  !item.hideOn && (<div key={item.id} className={css.toggle}> // this line <=
    // inside of your div          
  </div>) // and this line<=
))}

{switchItems.map（项=>(
！item.hideOn&&（//这一行我看不出你在哪里添加了
item.hideon
在
div
元素上，或者在第一个代码示例中的每个元素上。是的，在第一个示例中，我在每个div上都添加了它，这符合我的目的，但我正在尝试的是在第二个示例中，我在具有key as item.idI的div上添加了它您是如何将其添加到
div
元素的。如果不看到有问题的代码{！item.hideOn&&嘿，我尝试将其添加到此行，这一行给了我错误，您可以在第二个示例中看到