1

Component.js:

<Link to={{ pathname: 'audio-Player', state: { url: 'Demo' } }}> Play</Link>

If I click this Link then the AnitherComponent.js opens and works but if I open this AnitherComponent.js direct, then it says can not read property url at this.props.loaction.url

AnitherComponent.js:

componentDidMount() {
  this.state.song.src = this.props.loaction.url
  console.log(this.state.song)
  this.setState({
    play_img: document.querySelector('#play_img'),
    range: document.querySelector('#range1'),
  })
  const { song, range, play_img, total_time, currentTime } = this.state
}
Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
admin useonly
  • 11
  • 4
  • Hi! When you were asking your question, there was a big orange **How to Format** box to the right of the text area with useful info in it. There was also a toolbar full of formatting aids. And a **[?]** button giving formatting help. *And* a preview area showing what your post would look like when posted, between the text area and the Post Your Question button (so that you'd have to scroll past it to find the button, so you'd look at it). Making your post clear, and showing that you took the time to do so, improves your chances of getting good answers. – T.J. Crowder May 25 '20 at 13:07
  • 1
    **It's just a typo.** You have `loaction`, rather than `location`. – T.J. Crowder May 25 '20 at 13:08
  • Please provide this export default withRouter(FirstComponent) at the bottom of first component – Harmandeep Singh Kalsi May 25 '20 at 13:09

1 Answers1

0

You are trying to access loaction.url which doesn't exist. You can set a default value if it doesn't exist:

this.state.song.src = this.props.loaction?.url ?? "default value";

or

this.state.song.src = this.props.loaction && this.props.loaction.url || "default value";

P.S. you might need plugin for the optional chaining.

Ehsan Mahmud
  • 725
  • 4
  • 11