反应手风琴切换

Question

使用reactjs，我想制作只打开一个元素的手风琴。

我的代码如下（complete version on codepen）

selectItem(el) {
  var selected = this.state.selected;
  selected[el] = !selected[el];
  this.setState({ selected: selected });
}

renderItem(el) {
  var className = this.state.selected[el.id] ? "active" : "inactive";
  var onClick = this.selectItem.bind(this, el.id);
  return (
  <li key={el.id} className={className} onClick={onClick}>
    {el.name}
  </li>
  );
}

render() {
  console.log(this.state.selected);
  return <ul>{this.state.data.map(this.renderItem)}</ul>;
}

我做错了什么？任何建议都将受到欢迎。