Open stephencastaneda opened 4 years ago
As a user, when the song list loads, I should be able to click on a song to open a single page view.
WHEN I look at the song list THEN I click on a song AND a page opens AND I should see a single page view
in singleSong component
song
componentDidMount()
this.props.match.params
getSingleSong
songsData
songId
.then
response
setState
response.data
.catch
console.error
render
this.state
in the songList component
{ Link }
react-router-dom
render()
this.props
singleLink
/songs/${song.id}
<Link>
to={singleLink}
<i class="fas fa-music"></i>
User Story
As a user, when the song list loads, I should be able to click on a song to open a single page view.
AC
WHEN I look at the song list THEN I click on a song AND a page opens AND I should see a single page view
Dev Notes
in singleSong component
songto an empty object {}componentDidMount()function should get the songId fromthis.props.match.paramsgetSingleSongfunction insongsDataand pass in thesongId.thenshould pass in theresponseandsetStateof thesongtoresponse.data.catchshouldconsole.errorunable to get single songrendershould getsongfromthis.statein the songList component
{ Link }from thereact-router-domrender()should getsongfromthis.propssingleLinkwith the address/songs/${song.id}<Link>tag that includesto={singleLink}use the font-awesome music note<i class="fas fa-music"></i>