Components lose access to store when wrapped in <Grid> (react-inline-grid)

Viewed 238

I'm using react-inline-grid and as soon as I wrap my components with <Grid>, the wrapped components seem to loose their access to the store:

Uncaught TypeError: Cannot read property 'currentStep' of undefined

The code:

class App extends Component {

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch(loadData());
    }

    render() {
        return (
            <div>
                <Grid>
                        <Row>
                            <Cell>
                                <Stepper />
                            </Cell>
                        </Row>
                </Grid>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    app: state.app
});

export default connect(mapStateToProps)(App);

The extra div is because threw an error when I passed it an array of React components.

I tried this with different components and get a similar error each time. Also, the grid works when I'm inside an individual component.

Wrapping App is a Provider that hands down the store:

const MaterialApp = () => (
    <MuiThemeProvider>
        <App />
    </MuiThemeProvider>
);

injectTapEventPlugin();

ReactDOM.render(
    <Provider store={store}>
    <MaterialApp />
    </Provider>,
    document.getElementById('root')
);

Here's my container for Stepper for reference:

import { connect } from 'react-redux';
import AppStepper from '../components/Stepper/AppStepper';
import { selectStep, postNotification } from '../actions';

function handleChange(value, dispatch) {
    dispatch(selectStep(value));
    if (value === 2 || value === 3) {
        dispatch(postNotification('Coming soon!'));
    }
}

const mapStateToProps = (state, ownProps) => ({
    currentStep: state.app.currentStep
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    handleChange: (value) => {
        handleChange(value, dispatch);
    }
});

const Stepper = connect(
    mapStateToProps,
    mapDispatchToProps
)(AppStepper);

export default Stepper;

And component:

import React, { Component } from 'react';
import {
    Step,
    Stepper,
    StepButton,
} from 'material-ui/Stepper';
import PropTypes from 'prop-types';

class AppStepper extends Component {

    constructor(props) {
        super();
    }

  render() {
        const currentStep = this.props.currentStep;
        const onChange = this.props.handleChange;

    return (
      <div style={{width: '100%', maxWidth: 700}}>
        <Stepper linear={false} activeStep={currentStep}>
          <Step>
            <StepButton onClick={() => onChange(0)}>
              Import Data
            </StepButton>
          </Step>
          <Step>
            <StepButton onClick={() => onChange(1)}>
              Select Layout
            </StepButton>
          </Step>
          <Step>
            <StepButton onClick={() => onChange(2)}>
              Finalize Layout
            </StepButton>
          </Step>
                    <Step>
            <StepButton onClick={() => onChange(3)}>
              Export
            </StepButton>
          </Step>
        </Stepper>
      </div>
    );
  }
}

export default AppStepper;
2 Answers
Related