reactjsreact-routerreact-router-v4

How to pass multiple state through link in ReactJS

I want to pass more than one state for my next page which I'm redirecting from my another page.

I'm already passing one and that is working fine.

<Link to ={{pathname: "/CreateEventUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket } }} >
 <button type="button" className="btn btn-danger">Create an Event</button>
</Link>

Now I have to pass two states. What is the syntax for that?

<Link to ={{pathname: "/EventDetailsUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, eventId: event.id}}} >
Solution

  • The state parameter in the location pathname accepts an object and hence you can pass as many values as you need by passing them as an object like below:

    <Link to ={{
    pathname: "/CreateEventUser", 
    state: { 
        bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, 
        new_id: this.state.newID, 
        anotherValue: this.state.anotherValue 
    }
   }} >
 <button type="button" className="btn btn-danger">Create an Event</button>
</Link>