如何显示菜单项取决于使用reactjs的条件

嗨，我的目标是根据情况显示不同的菜单项。我可以根据条件检索不同的菜单项，但无法单击，或者handleChange也不起作用

代码如下：

<FormControl>
  <Select
    defaultValue=""
    onChange={this.handleChange}
    displayEmpty
    name="games"
    inputProps={{ "aria-label": "Without label" }}
  >
    <MenuItem value="">Game Type* </MenuItem>
    {this.state.indoor === true ? (
      <>
        <MenuItem value={0}>Carrom</MenuItem>
        <MenuItem value={1}>Chess</MenuItem>
        <MenuItem value={2}>Ludo</MenuItem>
      </>
    ) : (
      <MenuItem value={0}>Badminton</MenuItem>
    )}
  </Select>
</FormControl>

handleChange = (e) => {
    this.setState({gameName: e.target.value})
}

游戏类型*
{this.state.indior==真(
卡罗姆
国际象棋
卢多
) : (
羽毛球
)}
handleChange=（e）=>{
this.setState（{gameName:e.target.value}）
}

---

有人能帮我点击菜单列表吗？我无法点击任何菜单项。当我操控它时，它只是给出了

Carrom

的值。这是因为我提供的

吗？在我写条件之前，它工作得很好。但是，在写入condition onChange不工作之后，单击也不工作。

一个可能的解决方案是在呈现选项之前定义

游戏

。。。
康斯特游戏=室内===对吗？[“卡伦”、“国际象棋”、“卢多”]：[“羽毛球”]；
返回(
游戏类型*
{games.map（（game，i）=>(
{游戏}
))}
);