Failed to execute 'pushState' on 'History': function addComment() … could not be cloned

Question

I've tried to make my first app in React and I think I've made some serious error in the flow of the Application however trying to save it doesn't make it better.

I got my App.ksin which I have

<LatestRecipes latestRecipes={this.state.latestRecipes} allRecipes={this.state.recipes} addComment={this.addComment}/>

Right now AddComment is only:

addComment(key, commentData)
{
    console.log(key);
    console.log(commentData);
}

And in latest Recipe I have:

<Link to={{pathname: '/recipe/' + recipe.name, state: { recipe: recipe, index: index, addComment: this.props.addComment }}}>{recipe.name}</Link>    

This gives me the error:

Failed to execute 'pushState' on 'History': function addComment() ... could not be cloned.

What creates the error is the argument: addComment: this.props.addComment

if I remove it everything works but I need to pass my function thos to my Recipe component. Which is in App.js

<Route path="/recipe/:recipe" component={Recipe}/>

Which I need to pass all three arguments, recipe, index and the function addComment()

Answer 1

Changing:

<Route path="/recipe/:recipe" component={Recipe}/>

to:

<Route path="/recipe/:recipe" render={(props) => <Recipe {...props} addComment={this.addComment}/>} />

In my App.js solved it.