CODEWITHSUNDEEP
reactjsreduxreact-routerreact-redux
Victor Ferreira
Victor Ferreira

Reputation: 6449

Children props are not visible in parent component

In child component, I set the props as following:

function mapStateToProps(state) {
  return {
    user : state.App.get('user'),
    foo: 'ok'
  }
}

But when I read this.props.children in render method of parent component, foo is not there. Anyone knows why?

I realized that I can't see the child state from a parent in my project. Am I missing something?

I'm also using Redux in this app. Whats wrong? What's the proper way of doing something like this.props.children.foo in parent Component?

Upvotes: 0

Views: 434

Answers (1)

julianljk
julianljk

Reputation: 1327

You shouldn't be referencing this.props.children.foo to get foo. Once you've connected your component to mapStateToProps, you should be able to reference it just from this.props.foo

this.props.children will retrieve all the elements enclosed within an opening and closing tag of React component.

There is a CodePen example on the React documentation page that illustrates this: http://codepen.io/gaearon/pen/ozqNOV?editors=0010

function WelcomeDialog() {
    return (
        <FancyBorder color="blue">
            /*everything between these two blocks*/
            <h1 className="Dialog-title">
                Welcome
            </h1>
            <p className="Dialog-message">
                Thank you for visiting our spacecraft!
            </p>
            /*is what is sent to FancyBorder as this.props.children*/
        </FancyBorder>
    );
}

Source: https://facebook.github.io/react/docs/composition-vs-inheritance.html

Upvotes: 1

Related Questions