React - Passing State with this.props.children

Question

So I am trying to pass some props from my top level component to a child component, I have done some searching online but cannot find anything that shows how I can pass this.props.children WITH some values my component's state. Here is my code.

Layout (Parent):

export default class Layout extends React.Component {
    constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }

    render() {
        const {location} = this.props;
        console.log("layout");
        return (
            <div>
                <Nav location={location}/>
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">

                            {this.props.children}, data={this.state.data}

                        </div>
                    </div>
                    <Footer/>
                </div>
            </div>

        );
    }
}

When I call the "data" props in my next Component:

Home (Child):

//ON COMPONENT RENDER
    componentDidMount = () => {
        console.log("home");
        console.log(this.props.data);
    }

In my console it returns:

home

Undefined

Any pointers to how I should be doping this? Any help is appreciated, thank you in advance.

Answer 1

If you're trying to add a prop to the children directly, this won't really work since components are ment to be immutable. What you should do instead is create a map with clones of the children.

This blog post explains it fairly well: http://jaketrent.com/post/send-props-to-children-react/

And the relevent code snippets altered for your code:

class Layout extends React.Component {
  constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }

  renderChildren() {
    return React.Children.map(this.props.children, child => {
      if (child.type === Child) {
        return React.cloneElement(child, {
          data: this.props.data
        })
      } else {
        return child
      }
    });
  }

  render() {
    const {location} = this.props;
    console.log("layout");
    return (
        <div>
            <Nav location={location}/>
            <div className="container">
                <div className="row">
                    <div className="col-lg-12">
                        {this.renderChildren()}
                    </div>
                </div>
                <Footer/>
            </div>
        </div>
    );
  }
}

Answer 2

Do a console.log on this.state.data in your Layout component. I'm thinking its undefined there too.

I think you need to set your state before the constructor super() call or statically outside the constructor.

Edit: So this.props.children is a react element? You need to clone it to pass it different props.

React.cloneElement(this.props.children, {
    name: props.name
})