React + Redux: Cannot read property 'props' of null error

Question

I have been receiving a Cannot read property 'props' of null error in th client app that I am currently building with react and redux. I have been trying to implement a wrapper component/container for other react components in a web app as follows.(The reason I have included the contents of 4 files is that I don't know where the error is originating from)

main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import store, {history} from './App/store';

import Init from './App/Init';


ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Router path="/" component={Init}>
                <IndexRoute component={Container}/>
                <Route path="/view/:ItemId" component={Single}></Route>
            </Router>
        </Router>
    </Provider>,
    document.getElementById('main')
);

class Container extends Component{
    render(){
        return(
            <div>hello</div>
    );
    }
}

class Single extends Component{
    render(){
        return(
            <div>hello</div>
        );
    }
}

Init.js

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import * as actionCreators from './ActionCreators'
import App from './App';

function mapStateToProps(state, ownProps){
    return{
        items: state.items,
        entities: state.entities,
    };
}

function mapDispatchToProps(dispatch){
    return bindActionCreators(actionCreators, dispatch);
}


const Init = connect(mapStateToProps, mapDispatchToProps)(App);

export default Init;

store.js

import { createStore, compse, applyMiddleware } from 'redux';
import { browserHistory } from 'react-router';
import thunkMiddleware from 'redux-thunk';
import {syncHistoryWithStore} from 'react-router-redux';

//import the root reducer
import rootReducer from './rootReducer';

//import data
import {entities} from '../../data/entities';
import {items} from '../../data/items';

//create an object for the default data
const defaultState = {
    items,
    entities,
};

const store = createStore(rootReducer, defaultState);

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

and App.js

    import React, {Component} from 'react';

export default class App extends Component {
    render(){
        return(
            <div>
                <div className="content-wrapper">
                    <div className="grid-page">
                        {React.cloneElement({...this.props}.children, {...this.props})}//The error occurs here
                    </div>
                </div>
            </div>
        );
    }
}

and here is the console log of the error

ReactElement.js:271 Uncaught TypeError: Cannot read property 'props' of null
    at Object.ReactElement.cloneElement (ReactElement.js:271)
    at Object.cloneElement (ReactElementValidator.js:223)
    at App.render (App.js:15)
    at App.<anonymous> (makeAssimilatePrototype.js:15)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)

Please excuse the lack of brevity in my question, I have not found any answers on stack overflow that address the issue I am having, but if you could shed some light on what is going wrong, that would be great. Thanks

Frankly I'm surprised you're not getting a syntax error for that. Anyways, look here for the proper usage of `React.cloneElement` http://stackoverflow.com/questions/35835670/react-router-and-this-props-children-how-to-pass-state-to-this-props-children/35835834#35835834 — azium, Jan 20 '17 at 17:02
That does not work???...the "children" object is still null? — Shannen Smith, Jan 20 '17 at 17:27
`class` doesn't get hoisted.. try putting your definition for `Container` and `Single` above your `ReadDOM.render` call — azium, Jan 20 '17 at 18:48

score 0 · Accepted Answer · answered Jan 20 '17 at 18:55

class definitions in the spec don't get hoisted, though Babel is compiling it down to a function expression, which will hoist the variable, which is why the code doesn't crash at runtime, but the class definitions are still undefined

putting your class Container and class Single above your call to ReactDOM.render should solve this issue.

React + Redux: Cannot read property 'props' of null error

1 Answers1