title: React.js onClick event: TypeError: Cannot read property of undefined
body: <p>Currently having tough times learning React and JavaScript.</p>
  
  <p>I've got two components, <strong>Navigation</strong>:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Nav from './houses/Nav.js';
  
  // set data
  var navbar = {};
  navbar.brand = {linkTo: "#hero", text: "text"};
  navbar.links = [
        {linkTo: "#", event:"es", spanClassName: "flag-icon flag-icon-es"},
        {linkTo: "#", event:"en", spanClassName: "flag-icon flag-icon-gb"},
        {linkTo: "#about", text: "about", spanClassName: "btnicon icon-user"},
        {linkTo: "#contacts", text: "contacts", spanClassName: "btnicon icon-envelope-open"}
    ];
  
  class Navigation extends React.Component {
  
    render() {
      return (
      &lt;header&gt;         
        &lt;Nav {...navbar} /&gt;        
      &lt;/header&gt;
      )
    }
  }
  
  module.exports = Navigation;
  </code></pre>
  
  <p>and <strong>Nav</strong>:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class Nav extends React.Component {    
  
    render() {
  
      const changeLanguage = (lng) =&gt; {
        i18n.changeLanguage(lng);
      } 
  
        return(
          &lt;nav className="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
            &lt;div className="container"&gt;
              &lt;div className="navbar-header"&gt;
                &lt;button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"&gt;
                  &lt;span className="sr-only" lang="lt"&gt;Toggle nav&lt;/span&gt; 
                  &lt;span className="icon-bar"&gt;&lt;/span&gt;
                  &lt;span className="icon-bar"&gt;&lt;/span&gt;
                  &lt;span className="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} /&gt;
              &lt;/div&gt;
              &lt;div className="collapse navbar-collapse"&gt;
                &lt;NavMenu links={this.props.links} /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        );
      }
    };
  
    class NavBrand extends React.Component{
      render() {
        return (
          &lt;a className="navbar-brand" alt="back to home" href={this.props.linkTo}&gt;{this.props.text}
              &lt;span className="brandicon"&gt;&lt;/span&gt; 
              &lt;span className="brandname"&gt;&lt;/span&gt;   
          &lt;/a&gt;
        ); 
      }
    };
  
    class NavMenu extends React.Component{
      render() {
        var links = this.props.links.map(function(link){       
            return (
              &lt;NavLink linkTo={link.linkTo} text={link.text} active={link.active} event={link.event} spanClassName={link.spanClassName} /&gt;
            );
  
        });
        return (
          &lt;ul className="nav navbar-nav navbar-right"&gt;
            {links}
          &lt;/ul&gt;
        );
      }
    };
  
    class NavLink extends React.Component{
     render() {        
  
      if (this.props.event){
        return(
          &lt;li&gt;&lt;button onClick={() =&gt; changeLanguage(this.props.event)}&gt;{this.props.event}&lt;span className={(this.props.spanClassName)}&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;
        )
      }
      return(        
        &lt;li className={(this.props.active ? "active" : "")}&gt;&lt;a href={this.props.linkTo}&gt;{this.props.text} &lt;span className={(this.props.spanClassName)}&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      );
    }
  };
  
  
    module.exports = Nav;
  </code></pre>
  
  <p>Currently I want to add a custom onClick event only to a certain     <code>&lt;li&gt;</code>elements with language attribute. It should render this: </p>
  
  <p>The working onClick event inside other component's render() looks like this:
         <code>onClick={() =&gt; changeLanguage('lang_attribute')}</code>
  So I should get the same result but through the navigation render</p>
  
  <p>Pressing rendered button I get the error message: <code>Uncaught TypeError: Cannot read property 'changeLanguage' of undefined</code></p>
  
  <p>Need some  help with working sample</p>
  
  <p><strong>UPDATE</strong>
  It seems that my question is related mostly to 18next. I was studying the i18n documents (cause additionally I must make a translation for a menu items) and made some tries, but as I understand the problem is with HOC and i18n functions. They are out of scope, because here are several classes.
  So I getting two errors: t is not a function and i18n is undefined.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {translate} from 'react-i18next';
  
  
  class Nav extends React.Component {
  
    render() {
  
        return(
          &lt;nav className="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
            &lt;div className="container"&gt;
              &lt;div className="navbar-header"&gt;
                &lt;button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"&gt;
                  &lt;span className="sr-only"&gt;Toggle&lt;/span&gt; 
                  &lt;span className="icon-bar"&gt;&lt;/span&gt;
                  &lt;span className="icon-bar"&gt;&lt;/span&gt;
                  &lt;span className="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;              
                &lt;NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} /&gt;
              &lt;/div&gt;
              &lt;div className="collapse navbar-collapse"&gt;
                &lt;NavMenu links={this.props.links} /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        );
      }
    };
  
    class NavBrand extends React.Component{
      render() {
  
        return (
          &lt;a className="navbar-brand" alt="back to home" href={this.props.linkTo}&gt;{this.props.text}
              &lt;span className="brandicon"&gt;&lt;/span&gt; 
              &lt;span className="brandname"&gt;&lt;/span&gt;   
          &lt;/a&gt;
        ); 
      }
    };
  
    class NavMenu extends React.Component{
      render() {
  
        const { t, i18n } = this.props;
  
        var links = this.props.links.map(function(link, index){         
            return (
              &lt;PureNavLink  linkTo={link.linkTo} text={t(link.text)} active={link.active} event={link.event} spanClassName={link.spanClassName} /&gt;
              /*text={t(link.text)}*/  
  
            );
  
        });
        return (
          &lt;ul className="nav navbar-nav navbar-right"&gt;
            {links}
          &lt;/ul&gt;
        );
      }
    };
  
    class PureNavLink  extends React.Component{
  
      render() {        
        const { t, i18n } = this.props;
        const toggle = lng =&gt; i18n.changeLanguage(lng);       
  
        if (this.props.event){        
  
          return(  
            &lt;div&gt;               
  
            &lt;button onClick={() =&gt; toggle(this.props.event)}&gt;{t(this.props.event)}&lt;/button&gt;          
            &lt;/div&gt;        
          )
        }
  
        return(        
          &lt;li className={(this.props.active ? "active" : "")}&gt;&lt;a href={this.props.linkTo}&gt;{this.props.text} &lt;span className={(this.props.spanClassName)}&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;        
        );
      }
    };
  
    const NavLink = translate()(PureNavLink);
    module.exports = translate()(Nav);
  </code></pre>