React. this.props.children is undefined for component with nested subcomponents

Asked Aug 18 '15 at 13:34

Active Aug 19 '15 at 16:35

Viewed 506 times

I am newcomer with React and could not handle this error. I have two components the first one (routing):

var App = React.createClass({
  render: function() {
   return (
    <Template>
      <Locations>
        <Location path="/" handler={Catalog} />
        <Location path="/item/:item" handler={CatalogDetail} />
      </Locations>
    </Template>
   );
  }
});

and second one:

var Template = React.createClass({
  render: function() {
    return (
      <div className="container">
        {this.props.children} // should render one of child components
                              //{catalog}/{catalogDetail}
      </div>
    )
  }
});

this.props.children is undefined and I could not understand why is not seeing one of these components {Catalog} or {CatalogDetail}

edited Aug 19 '15 at 16:35

Eric Aya

69,473
35
181
253

asked Aug 18 '15 at 13:34

Vladyslav Babenko

1,349
18
26

I don't see Catalog or CatalogDetail defined anywhere. – ffxsam Aug 18 '15 at 13:54
They are defined into "App" component (these components work as expected)) – Vladyslav Babenko Aug 18 '15 at 13:57
What component is "the second one"? – Dominic Aug 18 '15 at 15:17
Second is "Template", first is "App" – Vladyslav Babenko Aug 18 '15 at 16:30
1

Are you attempting to use `react-router` or `react-router-component`? This doesn't seem to be the way you would set up `react-router`. – BradByte Aug 20 '15 at 18:52
I am using `react-router-component`. I have required it within "App" component: `var Router = require('react-router-component');` `var Locations = Router.Locations;` `var Location = Router.Location;` – Vladyslav Babenko Aug 20 '15 at 20:02

React. this.props.children is undefined for component with nested subcomponents

0 Answers0