Unable to access function from parent - sending props from parent to child

- 1 answer


I have an app which has a navbar, and a display below that shows all the posts.

Here is how it is setup:

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={CreatePost}/>

        <Route path="*" component={NotExist}/>

So, if you click on "New" in the navbar, you will be taken to server/submit and a form will appear where you can enter details for a new post. On submit, it will add the details to the posts state object.

Inside of App, I have a function called addToPosts().

render : function() {
        //<CreatePost addPostToPosts={this.addPostToPosts} posts={this.state.posts}/>
        return (
                <DisplayPosts postData={this.state.posts} />

@kirill-fuchs yesterday told me to use {this.props.children} to send the properties. However, when I check react console, I see that props are empty. But, I know it is doing something because if I get rid of the {this.props.children} then clicking on New doesn't do anything. But when I put it back, it redirects to the form.

In addition, when I click submit in the form, it says this.props.addToPosts is not a function, because the props are empty.

Can someone please help me?




It sounds like you want to pass props down to the children. You can use the following to do that:

{React.cloneElement(this.props.children, {addToPosts: this.addPostToPosts, posts: this.state.posts})}

This will pass a prop into the CreatePost component that you can then call when the submit button is pressed.

source: stackoverflow.com