referenceError: Can't find variable in react-native with fetch - react-native

Question

hey im trying to make a chart using victory from the data online json data in react native. the code for the component is like below
export default class Dashboard extends Component {
static navigationOption = {
title: 'DashboardScreen'
}
state = {
getValue: '',
dataSource:[],
isLoading: true
}
componentDidMount() {
const url = 'myurl';
fetch(url, {
method: 'GET',
headers: new Headers({
'Content-Type' : 'application/json',
})
})
.then((response)=> response.json() )
.then((responseJson) => {
console.log(responseJson.Views)
this.setState({
dataSource: responseJson,
isLoading: false
})
})
.catch((Error) => {
console.log(Error)
})
}
render() {
return(
<View style = {styles.container}>
<VictoryChart minDomain={{ y: 0, x:0 }} width={350} theme={VictoryTheme.material}>
<VictoryBar
style={{
data: { stroke: "#c43a31" },
parent: { border: "1px solid #ccc"}
}}
data={[
{ x: 1, y: 1 },
{ x: 2, y: dataSource[0].views},
{ x: 3, y: dataSource[1].views},
{ x: 4, y: dataSource[2].views},
{ x: 5, y: dataSource[3].views}
]}>
</VictoryBar>
</VictoryChart>
</View>
)
}
}
i thought the fetch already make the json information an array in dataSource Variable and can be used as a data in victory but i always got error like referenceError: Can't find variable 'dataSource'
So, it would be very nice if anyone helps me out with this code and suggest how make the json data into chart

Answer 1

change:
data={[
{ x: 1, y: 1 },
{ x: 2, y: dataSource[0].views},
{ x: 3, y: dataSource[1].views},
{ x: 4, y: dataSource[2].views},
{ x: 5, y: dataSource[3].views}
]}>
to
data={[
{ x: 1, y: 1 },
{ x: 2, y: this.state.dataSource[0].views},
{ x: 3, y: this.state.dataSource[1].views},
{ x: 4, y: this.state.dataSource[2].views},
{ x: 5, y: this.state.dataSource[3].views}
]}>
Hope this helps!