Passing props through react router not available in componentDidMount?

I've passed props via the react router like this to the mentioned component:

<BrowserRouter>
<Switch>
<Route path="/product-page" exact render=(props) => ( <ShopPages ...props response=this.state.response/>)/>
</Switch>
</BrowserRouter>


I would like to access this props in componentDidMount() like something like this:

componentDidMount()

componentDidMount()
console.log(this.props.response)



The prop this.props.response is available in the component I can console.log it in the render(). I'm not sure why in the above scenario the console shows the array empty. I've tried to see if the data is available then show the data as so console.log( 'show', this.props.response && this.props.response) or by adding async as so:

this.props.response

console.log( 'show', this.props.response && this.props.response)

async

async componentDidMount()
const data = await this.props.response



But this does nothing too. Any help?

()

<shopPage ... >

1 Answer
1

I'm just going to assume that this.state.response is not a Promise, but is actually the data since you said it was an empty array, therefore async/await will do nothing.

this.state.response

ComponentDidMount() is only fired once when the component mounts and is NOT the place to perform actions based on prop updates that can happen after mount. So I would suggest passing the promise, and if that is not an option do something like

componentDidUpdate(prevProps, prevState)
if (!prevProps.response.length && this.props.response.length)
//Your code




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.