Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass props with react-router using onClick methods

Im new to react and even newer to react-router and i create a react app which contains a few routes but some routes need the same data (props). I want to transfer those props through a onClickEvent when pressing a button on a present page. I read about some attempts like binding the onClick listener on a button to a method like

handleOnClick(){    
  this.props.history.push('/booking')
 ))

to redirect to a route called "booking". But how can i pass a single prop of my present page or the whole set of props to this new page? Is there any solution for this and how can i access the props on the redirected route?

Here is my Index.js, more routes will be added soon:

const routing = (
 <Router>
   <div>
    <Route exact path="/" component={App} />
     <Route path="/booked" component={Booked} />
   </div>
 </Router>
 );

ReactDOM.render(routing, document.getElementById("root"));

The routingtree should be the following: I have one mainview in my App.js which renders components of BookingItems. Within a Bookingitem i have multiple props. When i book some of the items, i should be redirected to my Booked.js component.

Within any BookingItems i have a button which should do the redirecting to the Booked.js.

BookingItems:

onButtonClick() {
  this.props.history.push("/booked");
 }

render(){
 return(
          <div className="alignCenterDiv">
            <button
              onClick={this.onButtonClick.bind(this)}
              align="center"
              className="buttonBooking"
            >
              Buchen
            </button>
          </div>
)}

Booked: Here i want to access any of the props i had in BookingItems or i created in booking item to pass it to Booked.

like image 948
Alex Avatar asked Oct 24 '25 19:10

Alex


2 Answers

If you redirect using:

this.props.history.push('/booking', {
  myProp: this.props.myProp,
  foo: 'bar'
})

Then, in /booking page, you can access the variables like so:

console.log(this.props.location.state)
/*
  {
    myProp: '...',
    foo: 'bar'
  }
*/
like image 162
Liren Yeo Avatar answered Oct 26 '25 08:10

Liren Yeo


You can do it like this:

You route

<Route path="/booking/:id" .../>

On Click

handleOnClick(){    
  this.props.history.push('/booking/12345')
 ))

Booking component

componentDidMount(){
  console.log(this.props.match.params.id);
}

For alternative options you can read this: How to get parameter value from query string

Another option (after question update it sounds like a better option) is to use redux (or something similar). When you click on the button you dispatch an action to set selectedBookingItem in global state to the clicked item. Then navigation (look at the react-router-redux). Booking component is connected to the redux and selectedBookingItem is mapped to the prop (mapStateToProps).

like image 29
Valerii Avatar answered Oct 26 '25 08:10

Valerii



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!