Javascript Reactjs/semanticu在映射中添加if条件

我想要的是在

map

函数中添加

if

条件，但没有成功：

const CityOptions = Data.CityData.map((state, index) => ({
    key: index,
    text: state.name,
    value: state.id,
}));

render(){
return(
<Dropdown
   id="City"
   search selection
   options={CityOptions}
></Dropdown>
}
}

const CityOptions=Data.CityData.map（（状态，索引）=>({
关键词:索引,，
text:state.name，
值：state.id，
}));
render（）{
返回(
}
}

我试过：

 <Dropdown
     id="City"
     search selection
 >
     {Data.CityData.map((v,i) => {
         if(v.pid === this.state.cityValue){
             return (
                 <option key={i} value={v.id}>{v.name}</option>
             )
         }
         return true
     })}
 </Dropdown>

{Data.CityData.map（（v，i）=>{
if（v.pid==this.state.cityValue）{
返回(
{v.name}
)
}
返回真值
})}

错误：

React.Children.仅应接收单个React元素子元素

而且：

<Dropdown
   id="City"
   search selection
   options={CityOptions.pid === this.state.cityValue ? CityOptions : null}
/>

结果:

没有数据

---

您可以先

过滤

Data.CityData.filter(x => x.pid === this.state.cityValue).map((v,i)  =>{
    return <option key={i} value={v.id}>{v.name}</option>
})

好的，它可以工作，但看起来我们在语义用户界面方面做得不对，它添加的选项很难看，我认为语义用户界面不接受添加html标记
参见示例：
ccss
这是输出htmlI我不明白，现在有什么问题吗？请你详细说明一下好吗？对不起，英语不好，是的，我尝试了：你的代码工作正常，但它没有问题将
添加到
中，哈哈哈，我的坏人。我已经检查了一百次，没有注意到。很高兴你解决了。
const CityOptions = Data.CityData.filter(x => x.pid === this.state.cityValue).map((v,i)  =>{
    return{
        key: v.id,
        value: v.id,
        text: v.text
    }
})