How to pass props to child via Link, asynchronously?

Question

I am building a flight search app, when i press the search button, it fires of a searchFlight() method, which sets state with the results. At the same time, I want to pass this state to the next component as props, and to redirect me to this different page '/results.

I currently have a Link within a Button, passing the state as props via the Link. Everything works except the state isn't passed through because I'm redirected to the new page before the state has been set. How do I pass props asyncronously, via Link??

<button onClick={this.searchFlights}>
     <Link to={{
                    pathname: "/results",
                    aboutProps: {match: this.state.matchingFlights}                  
                    }}>
         Search
     </Link>
</button>

I want to redirect to the new page AND pass props asyncronously, using one button / one click

aboutProps passes the state through via props, it works if i set the state first and then redirect to new page separately — Theo Wright, Oct 23 '19 at 14:58
check [this](https://stackoverflow.com/questions/54591359/react-reading-data-passed-as-parameter-in-history-push) question. — Molly, Oct 24 '19 at 11:35

score 0 · Answer 1 · answered Oct 24 '19 at 11:31

i figured it out, i couldn't do it using Link so just using a normal button, and following within a callback after setting the state

this.props.history.push({
    pathname: "/results",
    state: {
      matched: this.state.matchingFlights
    }
  })

How to pass props to child via Link, asynchronously?

1 Answers1