title: React-D3 using fetch data
body: <pre><code>class MyChart extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        data: null
      }
  
      this.fetchData = this.fetchData.bind(this);
      this.barChart = this.barChart.bind(this);
    }
  
    componentDidMount() {
      this.fetchData();
      this.barChart(this.state.data);
    }
  
    fetchData() {
      const API = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json'
  
      fetch(API)
      .then(response =&gt; response.json())
      .then(data =&gt; {
        this.setState({
          data: data.data
        })
      })
    }
  
    barChart(dataset) {
      const canvasWidth = 600;
      const canvasHeight = 400;
      const svgCanvas = d3.select(this.refs.canvas)
                       .append('svg')
                       .attr('width', canvasWidth)
                       .attr('height', canvasHeight)
  
      const xScale = d3.scaleLinear()
                        .domain([0, d3.max(dataset, d =&gt; d[0])])
                        .range([0, canvasWidth])
  
      const yScale = d3.scaleLinear()
                        .domain([0, d3.max(dataset, d =&gt; d[1])])
                        .range([canvasHeight, 0])
  
      svgCanvas.selectAll('rect')
              .data(dataset)
              .enter()
                .append('rect')
                .attr('class', 'bar')
                .attr('x', (d, i) =&gt; i * 30)
                .attr('y', d =&gt; yScale(d[1]))
                .attr('width', xScale(25))
                .attr('height', d =&gt; yScale(d[1]))
  
    }
  
    render() {
      return (
        &lt;d&gt;
          &lt;div id='title'&gt;my chart&lt;/div&gt;
          &lt;div ref='canvas'&gt;&lt;/div&gt;
        &lt;/d&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;MyChart /&gt;, document.getElementById('app'))
  </code></pre>
  
  <p>I am using React to visualize the graph with D3.
  I tried to fetch data of GDP, and use the data, but I have got nothing on the page.</p>
  
  <p>when I just put an array as an input to test by myself instead of fetching data,
  it shows at least something based on the input. I think the problem occurs when fetching data</p>
  
  <p>Any thoughts on this matter?</p>