How to Use Refs on Connected Components Blog

by jacobworrel

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/series-label.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.js"></script>
  <div id="app" />
</body>
</html>

Babel + JSX

class VideoPlayer extends React.Component {

  constructor() {
    super();
    this.state = {
      isPlaying: false,
    }
    this.handleVideoClick = this.handleVideoClick.bind(this);
  }
  
  handleVideoClick() {
    if (this.state.isPlaying) {
      this.video.pause();
    }
    else {
      this.video.play();
    }
    this.setState({ isPlaying: !this.state.isPlaying });
  }
  
  render() {
    return (
      <div>
        <video
          ref={video => this.video = video}
          onClick={this.handleVideoClick}
        >
          <source
            src="https://upload.wikimedia.org/wikipedia/commons/4/41/Big_Buck_Bunny_medium.ogv"
            type="video/ogg"
          />
        </video>
      </div>
    )
  }
}

class HighchartsComponent extends React.Component {
  componentDidMount() {
    this.chart = new Highcharts[this.props.type || 'Chart'](
      this.props.container, 
      this.props.options
    );
  }
  
  componentWillUnmount() {
    this.chart.destroy();
  }
  
  render() {
    return (
      <div id={this.props.container}></div>
    )
  }
}

const highchartsOptions = {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project...