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;