#StackBounty: #javascript #reactjs #grid #redux Components lose access to store when wrapped in <Grid> (react-inline-grid)

Bounty: 50

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 (
            
); } } 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 (
      
onChange(0)}> Import Data onChange(1)}> Select Layout onChange(2)}> Finalize Layout onChange(3)}> Export
); } } export default AppStepper;


Get this bounty!!!