App.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import WorldPop from './components/WorldPop/WorldPop'

class App extends Component {
  render() {
    let $chart

    switch (this.props.chart) {
      case 'WorldPop':
        $chart = <WorldPop />
        break
      case 'YieldDeclineBars':
        $chart = <YieldDeclineBars />
        break     
      case 'YieldDeclineLines':
        $chart = <YieldDeclineLines />
        break
      default:
        throw new Error(`Unknown chart: ${this.props.chart}`)
    }

    return (
      <div className="App">{$chart}</div>
    )
  }
}

export default connect(
  state => ({
    chart: state.chart,
  })
)(App)

WorldPop.js

<Chart title="World population" subtitle="Regional and demographic breakdown 1985-2015">
  <div>
    <h1>this is the header, here the code for the chart/graphic</h1>
  </div>
  <div>
	  <p>this is the footer, here the code for the year selector and everything else</p>
  </div>
</Chart>

YieldDeclineBars.js

<Chart title="World population" subtitle="Regional and demographic breakdown 1985-2015">
  <div>
    <h1>this is the header, here the code for the chart/graphic</h1>
  </div>
  <div>
	  <p>this is the footer, here the code for the year selector and everything else</p>
  </div>
</Chart>

YieldDeclineLines.js

<Chart title="World population" subtitle="Regional and demographic breakdown 1985-2015">
  <div>
    <h1>this is the header, here the code for the chart/graphic</h1>
  </div>
  <div>
	  <p>this is the footer, here the code for the year selector and everything else</p>
  </div>
</Chart>