TheoG TheoG -3 years ago 84
React JSX Question

How do I pass props into the <Route> of a component passed via a connect()? (Uncaught TypeError: Cannot read property 'children' of undefined)

OS: Windows 10 Pro

React-router: 4.1.1

React: 15.5.4

How do I pass props into the

<Route>
of a component, which were passed to the component via a connect()?

app.js



class MainApp extends React.Component {
constructor(props) {
super(props);
}

render () {
const SOME_PATH = window.location.pathname;
return (
<ApolloProvider store={store} client={client}>
<Router history={history}>
<App>
<Route path={SOME_PATH} component={Main}/>
</App>
</Router>
</ApolloProvider>
)
}
}





App.js



import Main from './Main';
import {
All_Posts_Comments_Query,
} from '../graphql/mutations-queries';
import { withRouter } from 'react-router-dom';

// Root Query
const allPostsCommentsQuery = graphql(All_Posts_Comments_Query, {
options: {
cachePolicy: 'offline-critical',
fetchPolicy: 'cache-first',
},
});

function mapStateToProps(state) {
return {
auth: state.auth
};
}

export const mapDispatchToProps = (dispatch) => {
return bindActionCreators(actionCreators, dispatch);
}

export default withRouter(compose(
allPostsCommentsQuery,
connect(mapStateToProps, mapDispatchToProps)
)(Main));





Main.js - So, when I attempt to do:



render () {
const props2 = this.props;

return (
<div>
<h1>
<Link to="/">Flamingo City</Link>
</h1>
<Switch>
<Route path={`${this.props.match.url}`} exact render={() => (
<PhotoGrid {...this.props2.children} {...this.props2} />
)} />
</Switch>
</div>
);
}





I get an
Uncaught TypeError: Cannot read property 'children' of undefined
error message. And console logging this.props in PhotoGrid.js reveals that props to be an empty object. But this.props are as per the attached image:

enter image description here

The full error message is:



Uncaught TypeError: Cannot read property 'children' of undefined
at render (http://localhost:7770/static/0.4bcdfe2e54a9396a2ff8.hot-update.js:135:99)
at Route.render (http://localhost:7770/static/bundle.js:79207:13)
at http://localhost:7770/static/bundle.js:127491:21
at measureLifeCyclePerf (http://localhost:7770/static/bundle.js:126770:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:7770/static/bundle.js:127490:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:7770/static/bundle.js:127517:32)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127441:36)
at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10)
at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12)
at ReactCompositeComponentWrapper.receiveComponent (http://localhost:7770/static/bundle.js:127242:10)
at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127449:23)
at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10)
at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12)
at ReactCompositeComponentWrapper.receiveComponent (http://localhost:7770/static/bundle.js:127242:10)
at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22)
at Object.updateChildren (http://localhost:7770/static/bundle.js:126609:25)
at ReactDOMComponent._reconcilerUpdateChildren (http://localhost:7770/static/bundle.js:131411:32)
at ReactDOMComponent._updateChildren (http://localhost:7770/static/bundle.js:131515:31)
at ReactDOMComponent.updateChildren (http://localhost:7770/static/bundle.js:131502:12)
at ReactDOMComponent._updateDOMChildren (http://localhost:7770/static/bundle.js:128656:12)
at ReactDOMComponent.updateComponent (http://localhost:7770/static/bundle.js:128474:10)
at ReactDOMComponent.receiveComponent (http://localhost:7770/static/bundle.js:128436:10)
at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22)
at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127449:23)
at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10)
at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12)
at ReactCompositeComponentWrapper.performUpdateIfNecessary (http://localhost:7770/static/bundle.js:127256:12)
at Object.performUpdateIfNecessary (http://localhost:7770/static/bundle.js:16938:22)
at runBatchedUpdates (http://localhost:7770/static/bundle.js:9264:21)
at ReactReconcileTransaction.perform (http://localhost:7770/static/bundle.js:27133:20)
at ReactUpdatesFlushTransaction.perform (http://localhost:7770/static/bundle.js:27133:20)
at ReactUpdatesFlushTransaction.perform (http://localhost:7770/static/bundle.js:9203:32)
at Object.flushBatchedUpdates (http://localhost:7770/static/bundle.js:9286:19)
at ReactDefaultBatchingStrategyTransaction.closeAll (http://localhost:7770/static/bundle.js:27199:25)
at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:7770/static/bundle.js:27146:16)
at Object.batchedUpdates (http://localhost:7770/static/bundle.js:130702:26)
at Object.enqueueUpdate (http://localhost:7770/static/bundle.js:9314:22)
at enqueueUpdate (http://localhost:7770/static/bundle.js:54187:16)
at Object.enqueueForceUpdate (http://localhost:7770/static/bundle.js:54320:5)
at Main.ReactComponent.forceUpdate (http://localhost:7770/static/bundle.js:57479:16)
at forceUpdateIfPending (http://localhost:7770/static/bundle.js:124887:43)
at traverseRenderedChildren (http://localhost:7770/static/bundle.js:124865:3)
at http://localhost:7770/static/bundle.js:124895:5
at Array.forEach (native)
at http://localhost:7770/static/bundle.js:14321:28
at wrapped (http://localhost:7770/static/bundle.js:103419:29)




Answer Source

Try to change <PhotoGrid {...this.props2.children} {...this.props2} /> to <PhotoGrid {...props2.children} {...props2} />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download