Passing states to this.props.children using Nested Routes

Question

I agree there are multiple questions asked for the same. I did a lot of research for a few hours, however, I couldnt resolve this easy looking error. According to How to pass props to {this.props.children} post, i understand the easy use of React.cloneElement and React.Children.

Following is my Parent Class:

class AboutPage extends React.Component {

constructor(props, context){
    super(props, context);

    this.state = {
        details: "details"
    }
}
render() {

    const childrenWithProps = React.Children.map(this.props.children,
        (child) => {
            React.cloneElement(child, {
                details: this.state.details
            })
        }
    );

    return (
        <div className="jumbotron">
            <h1>About</h1>
            <p>This application uses React, Redux, React Router and other libs for our EducationOne Project</p>
            <Link to="/about/Owner">
                <Button color="primary">test</Button>
            </Link>
            {childrenWithProps}
        </div>

    );
  }
}

AboutPage.PropTypes = {
    children: PropTypes.object.isRequired
};

Following is my child component:

const Owner = (props) => {
return (
    <div>Owner details: {props.details}</div>
  );
};

Instead of importing the child or parent, i nested the route in my routes.js to create a child for aboutPage:

export default (
<Route path="/" component={App}>
    <IndexRoute component={Login} />
    <Route path="home" component={HomePage}/>
    <Route path="about" component={AboutPage}>
        <Route path="omkar" components={Omkar} />
    </Route>
    <Route path="courses" component={CoursesPage}>
        {/*<IndexRoute components={CourseDetailsAndList}/>*/}
    </Route>
</Route>
);

However, I dont see any error or any message in the console, nor the child component loaded when i click the button to load the child component.

Any help will be really appreciated.

score 3 · Accepted Answer · answered Jun 18 '17 at 03:07

The problem is in your map function. The callback arrow function has block body with brackets and so you need to explicitly return your cloned element with the return keyword.

In a concise body, only an expression is needed, and an implicit return is attached. In a block body, you must use an explicit return statement.

const childrenWithProps = React.Children.map(this.props.children, child => {
  return React.cloneElement(child, {
    details: this.state.details
  });
});

Passing states to this.props.children using Nested Routes

1 Answers1