How to pass multiple state through link in ReactJS

user_8724053 0
Viewed 13056

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

One I'm already passing 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've to pass two state. 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}}} >
react-router-v4 react-router reactjs
2 Answers

The state parameter in the location pathname excepts and object and hence you can pass as many values as you need by passing then as an object like

<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>
user_59281860

way 1: This is how you will send multiple state through a link state: send:

<Link
   to={{
      pathname: "/app/style/form",
      state: {
             item: item,
             styleList: styleList
      },
   }}
>
Go Button
</Link>

Here how you will receive data receive:

let stateData = props.location.state
var styleUpdate = stateData["item"]
var styleList = stateData['styleList']

way 2: you can also change the name of the variable you want to hold the state.(custom state name) send:

<Link 
    to={{
        pathname: "/app/style/form", 
        styleList: styleList
    }}>
    Go Next
</Link>

receive:

let styleList = props.location.styleList
user_145915470
Related