CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4react-props
Umar Javed
Umar Javed

Reputation: 59

How can I pass function using props in React Router Link?

I have to pass a function to another component using Link

    testFavorite=()=>{
        console.log("work")
    }

    <Link 
       to={{
       pathname: '/popular',
         state:{
            testFavorite: this.testFavorite
         }
       }}>
   Popular</Link>

This is how I call a function this.props.location.state.testFavorite();

This is giving me this error

DataCloneError: Failed to execute 'pushState' on 'History': () => testFavorite() could not be cloned.

Upvotes: 1

Views: 1855

Answers (1)

Ali Amini
Ali Amini

Reputation: 192

In <Link /> component, I replace "state" property with "data" property. And it works now!

<Link 
    to={{
       pathname: '/popular',
       data:{
          testFavorite: this.testFavorite
       }
    }}
>
   Popular
</Link>

It will be accessable with this: this.props.history.location.data

Upvotes: 3

Related Questions