I have a Dashboard with rotating slides, each of which has a corresponding tab in Bldgs. Both Dashboard.js and Bldgs.js are children to my App.js.

When a user clicks on a specific slide A in Dashboard.js, Dashboard needs to tell App.js so that App can tell Bldgs.js to have tab A displayed when it routes to Bldgs.

I believe that I am passing the correct index value from Dashboard up to App and down to Bldgs. However, an error is being thrown in my App.js file stating:

Uncaught TypeError: Cannot read property 'push' of undefined

My code was working fine before I started passing my handleClick() function to my Dashboard component.

Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import './index.css';

import injectTapEventPlugin from 'react-tap-event-plugin';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import { BrowserRouter as Router } from 'react-router-dom';

import { hashHistory } from 'react-router';



// Needed for onTouchTap

// http://stackoverflow.com/a/34015469/988941

injectTapEventPlugin();



ReactDOM.render(

  <MuiThemeProvider>

    <Router history={hashHistory}>

      <App />

    </Router>

  </MuiThemeProvider>,

  document.getElementById('root')

);

App.js

import React from 'react';

import { Route } from 'react-router-dom';

import Dashboard from './Dashboard';

import Bldgs from './Bldgs';



var selectedTab;



class App extends React.Component {

  constructor(props) {

    super(props);

    this.handleClick = this.handleClick.bind(this);

    selectedTab = 0;

  }



  handleClick(value) {

    selectedTab = value;

    // console.log(selectedTab);

    this.props.history.push('/Bldgs');

    // console.log(this.props);

  }



  render() {

    var _this = this;



    return (

      <div>

        <Route exact path=/ render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />

        <Route path=/Bldgs component={Bldgs} curTab={selectedTab} />

      </div>

    );

  }

}



export default App;

Dashboard.js

import React, { Component } from 'react';

import './Dashboard.css';

import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel';

...



var curIndex;



class Dashboard extends Component {

  constructor(props) {

    super(props);

    this.handleEnter = this.handleEnter.bind(this);

    this.handleChange = this.handleChange.bind(this);

    curIndex = 0;

  }



  handleEnter(e) {

    // console.log(curIndex);

    this.props.handleClick(curIndex);

  }



  handleChange(value) {

    // console.log(value);

    curIndex = value;

  }



...

}



export default Dashboard;

Bldgs.js

...

var curTab;



class Bldgs extends Component {

  constructor(props) {

    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.goHome = this.goHome.bind(this);

    curTab = 0;

  }



  handleChange(value) {

    this.setState({'selectedTab': value});

    console.log(this.state);

  }



  goHome(e) {

    this.props.history.push('/');

  }



...

}



export default Bldgs;