Artists

Artist.js

import React, { Component } from 'react';
import { Card, CardImg, CardBody, CardText, CardTitle } from 'reactstrap';
import axios from 'axios';

class Artist extends Component {

  state = {

  }

  componentDidMount = () => {
    axios.get('/artist/'+this.props.match.params.artistName)
      .then((response) => {
        this.setState(response.data.artist)
      })
      .catch(function (error) {
        console.log(error.response);
      });
  }



  render() {
    return (
      <Card>
        <CardImg top width="100%" src={this.state.image} alt="Card image cap" />
        <CardBody>
          <CardTitle>{this.state.name}</CardTitle>
          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
          <CardText>
            <small className="text-muted">Last updated 3 mins ago</small>
          </CardText>
        </CardBody>
      </Card>
    )
  }
}

export default Artist;

ArtistList.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { ListGroup, ListGroupItem } from 'reactstrap';
import axios from 'axios';

class ArtistList extends Component {

  state = {
    artists: []
  }

  componentDidMount = () => {
    const _this = this;
    axios.get('/artists')
      .then(function (response) {
        console.log(response);
        _this.setState({
          artists: response.data
        });
      })
      .catch(function (error) {
        console.log(error.response);
      });
  }



  render() {
    const artists = this.state.artists.map((item, i) => {
      return <ListGroupItem key={"artist"+i}>
      <Link to={"/artists/"+item.artist}>{item.artist}</Link>
      </ListGroupItem>
    });

    return (
      <div>
        <ListGroup>
        {artists}
      </ListGroup>
      </div>
    )
  }
}

export default ArtistList;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, Switch } from 'react-router-dom';

import ArtisList from './artist/ArtisList';
import Artist from './artist/Artist';

ReactDOM.render((
  <HashRouter>
    <Switch>
      <Route  exact path="/artists" name="Artist List" component={ArtisList} />
      <Route  path="/artists/:artistName" name="Artist" component={Artist} />
    </Switch>
  </HashRouter>
), document.getElementById('root'));