React-D3 using fetch data - reactjs

Question

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 => response.json())
.then(data => {
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 => d[0])])
.range([0, canvasWidth])
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[1])])
.range([canvasHeight, 0])
svgCanvas.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', (d, i) => i * 30)
.attr('y', d => yScale(d[1]))
.attr('width', xScale(25))
.attr('height', d => yScale(d[1]))
}
render() {
return (
<d>
<div id='title'>my chart</div>
<div ref='canvas'></div>
</d>
)
}
}
ReactDOM.render(<MyChart />, document.getElementById('app'))
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.
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
Any thoughts on this matter?

Answer 1

When the component start rendering, first thing will be called componentDidMount() .So in your componentDidMount() two things are there
fetching api
rendering barchart , which will be run in same batch
So when api call happen setState will not assign state.data value as it is asynchronous.
But next when your barchart want to render, it's getting null value as argument.
Thats the reason it's not working.
I suggest u to put the this.barChart(data.data) inside the fetch api.