title: React: Cannot read property 'method()' of undefined when method is bound
body: <p>Hey guys I'm trying to render a table in react which sets a row as selected in the state when it is clicked.</p>
  
  <p>I'm getting an error like this when the row is clicked: <code>Uncaught TypeError: Cannot read property 'setSelected' of undefined</code></p>
  
  <p>There are loads of questions about this and the solution seems to be to add the line <code>this.setSelected = this.setSelected.bind(this);</code> to the constructor so that the function is actually accessible.</p>
  
  <p>I already knew to do that and as you can see below, I've done it and it's still giving me the error. I'm completely stumped.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class ShowsList extends Component {
    constructor(props) {
      super(props);
      this.state = {selected: {showID: null, i: null}};
      this.setSelected = this.setSelected.bind(this);
    }
  
    setSelected(event, showID, i) {
      this.setState({
        selected: {showID, i}
      });
      console.log(this.state.selected);
    }
  
  
    render() {
      return (
        &lt;div className="shows-list"&gt;
  
        &lt;table className="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope="col"&gt;ID&lt;/th&gt;
        &lt;th scope="col"&gt;Name&lt;/th&gt;
        &lt;th scope="col"&gt;Location&lt;/th&gt;
        &lt;th scope="col"&gt;Date&lt;/th&gt;
        &lt;th scope="col"&gt;Time&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      {this.props.shows.map( function(show, i) {
        return (
          &lt;tr
            key={i}
            onClick={(e) =&gt; {this.setSelected(e, show._id, i)}}&gt;
            &lt;td&gt;{i+1}&lt;/td&gt;
            &lt;td&gt;{show.eventName}&lt;/td&gt;
            &lt;td&gt;{show.location}&lt;/td&gt;
            &lt;td&gt;{show.date}&lt;/td&gt;
            &lt;td&gt;{show.startTime}&lt;/td&gt;
          &lt;/tr&gt;);
      })}
    &lt;/tbody&gt;
  &lt;/table&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default ShowsList;
  </code></pre>