Calling a function from a different react file
<p>I'm close to getting this to work. Hoping someone can help me with this.</p>

<p>I have 2 React files. One being the <code>Container</code> and the other being the <code>Nav</code> component.</p>

<p>Inside my container component which is called <code>_template.js</code>, I'm importing a modal npm package. I created a <code>showModal</code> function inside this container file that I'm trying to access inside the <code>Nav</code> component.</p>

<p>This is what I have so far and receive this error <code>Uncaught TypeError: Cannot read property 'modal' of undefined</code></p>

<p>_template.js:</p>

<pre><code>import React from 'react';
import { Link } from 'react-router';


import { prefixLink } from 'gatsby-helpers';
import { config } from 'config';

import Headroom from 'react-headroom';

import Nav from './nav.js';

import '../css/main.scss';

import Modal from 'boron/DropModal';

const modalStyle = {
  minHeight: '500px',
  backgroundColor: '#303841'
};

const backdropStyle = {
  backgroundColor: '#F6C90E'
};

const contentStyle = {
  backgroundColor: '#303841',
  padding: '3rem'
};





export default class RootTemplate extends React.Component {
  static propTypes = {
    location: React.PropTypes.object.isRequired,
    children: React.PropTypes.object.isRequired,
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired,
  }

  constructor() {
    super();

  }

  showModal () {
    this.refs.modal.show();
  }



  render() {
    return (
      &lt;div&gt;
        &lt;Headroom&gt;
          &lt;Nav showModal={this.showModal}/&gt;
        &lt;/Headroom&gt;
        &lt;Modal ref="modal" modalStyle={modalStyle} contentStyle={contentStyle} backdropStyle={backdropStyle}&gt;
          &lt;form&gt;
            &lt;label&gt;Name:&lt;/label&gt;
            &lt;input type="text"/&gt;
            &lt;label&gt;Email:&lt;/label&gt;
            &lt;input type="email"/&gt;
            &lt;label&gt;Message:&lt;/label&gt;
            &lt;input type="text-area"/&gt;
            &lt;input type="submit" placeholder="Submit" /&gt;
          &lt;/form&gt;
        &lt;/Modal&gt;
        {this.props.children}
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>And my Nav.js file:</p>

<pre><code>import React from 'react';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';



import { Nav, NavGroup, NavItem, NavToggle, Icon } from 're-bulma';



export default class nav extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }



  render() {
    return (
      &lt;div&gt;
        &lt;Nav&gt;
          &lt;NavGroup align="left"&gt;
            &lt;NavItem&gt;
              &lt;Link to={prefixLink('/')}&gt;
              &lt;h2&gt;Dillon Raphael&lt;/h2&gt;
              &lt;/Link&gt;
            &lt;/NavItem&gt;
          &lt;/NavGroup&gt;

          &lt;NavToggle /&gt;

          &lt;NavGroup align="right" isMenu&gt;
            &lt;NavItem&gt;
            &lt;/NavItem&gt;
            &lt;NavItem&gt;
            &lt;/NavItem&gt;
            &lt;NavItem&gt;
              &lt;a href="#" onClick={::this.props.showModal}&gt;Let's Work!&lt;/a&gt;
            &lt;/NavItem&gt;
          &lt;/NavGroup&gt;
        &lt;/Nav&gt;



      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>Notice the <code>&lt;a href="#" onClick={::this.props.showModal}&gt;Let's Work!&lt;/a&gt;</code> this is where I'm trying to call the showModal function that I pass down from the <code>_template.js</code> file.</p>