title: why is my bind not working in constructor
body: <p>I'm doing a very simple two button state. where if i click abutton, A component displays and if bbutton is clicked then component B. I'm mapping through array of items so that each of them have their own buttons state. Lets say if I click item 1's button B then I want only first Item B to show. Right now All of them gets triggered at once.  I have bounded each of them in the constructor but still i'm unable to get only the once the once clicked to trigger and show the relevant component. </p>
  
  <pre><code>class Home extends Component {
  
  
    constructor(props) {
      super(props);
      this.state = {
        lists: []
        showA: true,
        showB: false
      }
      this.aButtonHandler = this.aButtonHandler.bind(this);
      this.bButtonHandler = this.bButtonHandler.bind(this);
    }
  
  
  
    aButtonHandler = (e) =&gt; {
      this.setState({
        showA: true,
        showB: false 
      })
    }
  
  
  
    bButtonHandler = (e) =&gt; {
      this.setState({
        showA: false,
        showB: true
      })
    }
  
  
  
  
   render(){
      return (
        &lt;div&gt; 
  
         {this.state.lists.map(detail =&gt; 
          &lt;li&gt;{detail.id}&lt;/li&gt;
          &lt;button onClick={(e) =&gt; this.aButtonHandler(e)} &gt;see A&lt;/button&gt;
          &lt;button onClick={(e) =&gt; this.bButtonHandler(e)} &gt;see B&lt;/button&gt; 
  
          {this.state.showA ? 
            &lt;ComponentA /&gt;  : null
          }
  
          {this.state.showB ? 
             &lt;ComponentB /&gt;  : null
           }
         )}
  
         &lt;/div&gt;
        )
      }  
  </code></pre>