title: Cannot read property 'context' of null
body: <p>I've been going through the Egghead "Build your first production quality React app" and everything's going fine until lesson 17, where you're supposed to use <code>context</code>to create your own home made router component. As far as I can tell, I do exactly the same thing as in the lesson, but I get this console error when I click on one of the <code>Link</code> component:</p>
  
  <pre><code>Link.js:11 Uncaught TypeError: Cannot read property 'context' of null
  at handleClick (http://localhost:3000/static/js/bundle.js:33792:12)
  at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17162:17)
  at executeDispatch (http://localhost:3000/static/js/bundle.js:16945:22)
  at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:16968:6)
  at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16356:23)
  at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16367:11)
  at Array.forEach (native)
  at forEachAccumulated (http://localhost:3000/static/js/bundle.js:17265:10)
  at Object.processEventQueue (http://localhost:3000/static/js/bundle.js:16570:8)
  at runEventQueueInBatch (http://localhost:3000/static/js/bundle.js:24192:19)
  </code></pre>
  
  <p>The link component looks like that:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export class Link extends Component {
    static contextTypes = {
      route: React.PropTypes.string,
      linkHandler: React.PropTypes.func,
    }
  
    handleClick(e) {
      e.preventDefault();
      this.context.linkHandler(this.props.to)
    }
  
    render() {
      const activeClass = this.context.route === this.props.to ? 'active' : '';
      return &lt;a href="#" className={activeClass} onClick={this.handleClick}&gt;{this.props.children}&lt;/a&gt;
    }
  }
  
  Link.propTypes = {
    to: React.PropTypes.string.isRequired
  }
  </code></pre>
  
  <p>And the Router component looks like that:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  const getCurrentPath = () =&gt; {
    const path = document.location.pathname;
    return path.substring(path.lastIndexOf('/'));
  }
  
  export class Router extends Component {
    state = {
      route: getCurrentPath()
    }
  
    handleLinkClick = (route) =&gt; {
      this.setState({ route }); // same as { route: route }
      history.pushState(null, '', route);
    }
  
    static childContextTypes = {
      route: React.PropTypes.string,
      linkHandler: React.PropTypes.func,
    };
  
    getchildContext() {
      return {
        route: this.state.route,
        linkHandler: this.handleLinkClick,
      };
    }
  
    render() {
      return &lt;div&gt;{this.props.children}&lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>Any idea of what could be causing the problem?</p>
  
  <p>Thanks for any pointer in the right direction!</p>
  
  <p>EDIT:</p>
  
  <p>After following the advices I got (thanks!), I bound the <code>handleClick</code> in a constructor (same result with an arrow function) and verified that the function is called as expected, but now I get a different error:</p>
  
  <pre><code>Uncaught TypeError: this.context.linkHandler is not a function
  at Link.handleClick (http://localhost:3000/static/js/bundle.js:33707:21)
  at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17162:17)
  at executeDispatch (http://localhost:3000/static/js/bundle.js:16945:22)
  at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:16968:6)
  at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16356:23)
  at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16367:11)
  at Array.forEach (native)
  at forEachAccumulated (http://localhost:3000/static/js/bundle.js:17265:10)
  at Object.processEventQueue (http://localhost:3000/static/js/bundle.js:16570:8)
  at runEventQueueInBatch (http://localhost:3000/static/js/bundle.js:24192:19)
  </code></pre>