import React, { Component } from 'react';
import axios from "axios";
import ReactMarkdown from 'react-markdown';
import './Songdetail.css';

const API = 'https://api.voornameninliedjes.nl/songs/';
const FLICKR_PHOTO_DETAIL = 'https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=9676a28e9cb321d2721e813055abb6dc&format=json&nojsoncallback=true&photo_id=';
const FLICKR_USER_DETAIL = 'https://api.flickr.com/services/rest/?method=flickr.people.getInfo&api_key=9676a28e9cb321d2721e813055abb6dc&format=json&nojsoncallback=true&user_id=';

class Songdetail extends Component {

  constructor(props) {
    super(props);

    this.state = {
      song: '',
      photo: '',
      owner: ''
    };
  }

  componentDidMount() {
    const songId = this.props.match.params.id;

    axios.get(API + songId)
      .then(res => {
        const song = res.data;
        axios.get(FLICKR_PHOTO_DETAIL + song.flickrPhotos[0])
          .then(res => {
            const photo = res.data.photo;
            axios.get(FLICKR_USER_DETAIL + photo.owner.nsid)
              .then(res => {
                const owner = res.data;
                this.setState({
                  song: song,
                  photo: photo,
                  owner: owner
                });
              })
          })
      });
  }

  render() {
    const song = this.state.song;
    const photo = this.state.photo;
    const owner = this.state.owner;
    console.log(owner);
    console.log(photo);

    return (
      <div className="Songdetail">
        <header className="song-title"><h1>{song.artist}</h1><h2>{song.title}</h2></header>
        <content className="song-text"><ReactMarkdown source={song.background} /></content>
        <aside className="song-spotify">
          <iframe src={`https://open.spotify.com/embed/track/${song.spotify}`} className="spotify" width="100%" height="100%" title={song.title} frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
        </aside>
        <aside className="song-youtube">
          <iframe src={`https://www.youtube.com/embed/${song.youtube}?rel=0`} width="100%" height="100%" title={song.title}></iframe>
        </aside>
        <aside className="song-photos">
          <img
            src={`https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_c.jpg`}
            alt={photo.title}
          />
          <p>This is some text with the photo</p>
        </aside>
      </div>
    );
  }
}

export default Songdetail;
@@ -699,12 +699,36 @@
 ner:
+ '',%0A      contribution:
  ''%0A
-
     
@@ -1136,32 +1136,205 @@
 owner = res.data
+.person;%0A                const contribution = %7B%0A                    'owner': owner.username._content,%0A                    'url': owner.photosurl._content%0A                  %7D
 ;%0A              
@@ -1443,16 +1443,62 @@
 r: owner
+,%0A                  contribution: contribution
 %0A       
@@ -1674,16 +1674,89 @@
 .owner;%0A
+    const contribution = this.state.contribution;%0A    console.log(song);%0A
     cons
@@ -1794,16 +1794,47 @@
 (photo);
+%0A    console.log(contribution);
 %0A%0A    re
@@ -2757,40 +2757,26 @@
  %3Cp%3E
-This is some text with the photo
+%7Bcontribution.url%7D
 %3C/p%3E

Add setup for contribution for picture