title: React JS - Uncaught TypeError: Cannot read property 'bind' of undefined
body: <p>I would like to show <code>TopicsList</code>component when user clicks on <code>SingleTopicBox</code> component and hide <code>SelectedTopicPage</code> component. However, i'm getting error: <code>Uncaught TypeError: Cannot read property 'bind' of undefined</code> on topic-list.jsx file.</p>
  
  <p><strong>main-controller.jsx</strong></p>
  
  <pre><code>import {React, ReactDOM} from '../../../build/react';
  
  import TopicsList from '../topic-list.jsx';
  import SelectedTopicPage from '../selected-topic-page.jsx';
  import topicPages from '../../content/json/topic-pages.js';
  
  export default class MainController extends React.Component {
  
    state = {
      isTopicClicked: false,
      topicPages
    };
  
    onClick(topicID) {
      this.setState({isTopicClicked: true});
      this.setState({topicsID: topicID});
    };
  
    render() {
      return (
        &lt;div className="row"&gt;
          {this.state.isTopicClicked
            ? &lt;SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages}/&gt;
            : &lt;TopicsList/&gt;}
        &lt;/div&gt;
      );
    }
  };
  </code></pre>
  
  <p><strong>topic-list.jsx</strong></p>
  
  <pre><code>import {React, ReactDOM} from '../../build/react';
  
  import SingleTopicBox from './single-topic-box.jsx';
  import SelectedTopicPage from './selected-topic-page.jsx';
  import topicPages from '../content/json/topic-pages.js';
  
  export default class TopicsList extends React.Component {
    onClick(){
      this.props.onClick.bind(null, this.topicID);
    },
    render() {
      return (
        &lt;div className="row topic-list"&gt;
          &lt;SingleTopicBox topicID="1" onClick={this.onClick} label="Topic"/&gt;
          &lt;SingleTopicBox topicID="2" onClick={this.onClick} label="Topic"/&gt;
          &lt;SingleTopicBox topicID="3" onClick={this.onClick} label="Topic"/&gt;
          &lt;SingleTopicBox topicID="4" onClick={this.onClick} label="Topic"/&gt;
        &lt;/div&gt;
      );
    }
  };
  </code></pre>
  
  <p><strong>single-topic-box.jsx</strong></p>
  
  <pre><code>import {React, ReactDOM} from '../../build/react';
  
  export default class SingleTopicBox extends React.Component {
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className="col-sm-2"&gt;
                      &lt;div className="single-topic" data-topic-id={this.props.topicID}&gt;
                          {this.props.label} {this.props.topicID}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  };
  </code></pre>