如何做到这一点？仅显示ID项目和按钮

Question

我想要达到的目的是获取“全部和唯一”的id项以及两个按钮来显示。 （现在，仅按钮在页面加载时不显示id项目）。我能够成功完成的工作是，单击任一按钮，然后在该特定<li>的名称或ID之间切换项目内容。但是对于<li>的其余部分，我无法显示该ID。你能帮我么。我完全被困住了。

class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lists: [{id: 1, name: "abc"}, {id: 2, name: "def"}],
      showId: true,
      showName: false,
      active: null
    }
    this.showIdHandler = this.showIdHandler.bind(this);
    this.showNameHandler = this.showNameHandler.bind(this);
  }

  showIdHandler (index, e) {
    this.setState({
      showId: true,
      showName: false,
      active: index
    })
   }

  showNameHandler (index, e) {
   this.setState({
     showId: false,
     showName: true,
     active: index
   })
  }

 render(){
    return ( 
      <div>
         {this.state.lists.map((detail, index) =>
         <li key={index}>
            <button onClick={this.showIdHandler.bind(this, index)}> showid </button>
            <button value = {detail.id} onClick={this.showNameHandler.bind(this, index)}>showName</button><br></br> 
    {this.state.showId && this.state.active === index ? <div> {detail.id} </div> : null}
    {this.state.showName && this.state.active === index ? <div> {detail.name} </div> : null}          
         </li>
        )}  
     </div>
  )}