Vimeo Thumbnail Component

VimeoThumbnail.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class VimeoThumbnail extends Component {
  state = {
    loading: true,
    thumbnail: null
  };

  componentDidMount() {
    this.getThumbnail(this.props.videoID);
  }

  getThumbnail = videoID => {
    if (videoID === null) {
      return '';
    }

    const x = new XMLHttpRequest();

    x.open('GET', `http://vimeo.com/api/v2/video/${videoID}.xml/`, true);
    x.onreadystatechange = () => {
      if (x.readyState === 4 && x.status === 200) {
        const doc = x.responseXML;
        const thumbnail = doc.getElementsByTagName('thumbnail_medium')[0];
        this.setState({ loading: false });
        this.setState({ thumbnail: thumbnail.textContent });
      }
    };
    x.send(null);
  };

  renderThumbnail = thumbnail => {
    if (thumbnail === undefined) {
      return (
        <div
          style={{
            width: 163,
            height: 114,
            borderRadius: 8,
            backgroundColor: '#D8D8D8'
          }}
        />
      );
    }

    return (
      <img
        src={thumbnail}
        alt=""
        width="163"
        height="114"
        style={{ borderRadius: 8 }}
      />
    );
  };

  render() {
    if (this.state.loading) {
      return <div>Loading...</div>;
    }

    return <div>{this.renderThumbnail(this.state.thumbnail)}</div>;
  }
}

VimeoThumbnail.propTypes = {
  videoID: PropTypes.string.isRequired
};

export default VimeoThumbnail;