Result.jsx

class Result extends Component {
  constructor(props){
    super(props);
    this.state = {
      song: {},
      ready: 'initial'
    }
  }
  componentDidMount() {
    const {match : {params} } = this.props;
    const song = params;
    this.setState({ready: 'loaded'});
  }
  render(){
    const{song} = this.state;
    return(
      <ResultStyle>
        <Header>
            <h1>Soundio</h1>
            <p>The Music Hub</p>
            <Form />
          </Header>
          <main>
            <Container>
              <Grid>
                { song.length ? '' : <Loader />  }
                { ready === 'loading' ? 'Loading...' : '' }
                { song.map(song => (
                  <Column columns="3" key={song.id}>
                    <MusicList image={song.album.cover_medium ? song.artist.picture_medium:''}>
                      <h3 onClick="pointer"><Link to={`/song/${song.id}`}>{song.artist.name}</Link></h3>
                      <i className="fa fa-music">Album:{song.album.title}</i> <br />
                      <i className="fa fa-music">Track:{song.title}</i>
                    </MusicList>                           
                  </Column>
                )) }
              </Grid>
            </Container>
          </main>
          <Footer />
      </ResultStyle>
    )
  }
}


export default Result;