Chart Js not showing data value which is passed dynamically

Question

I am trying to create a corona virus tracker using react and chart js. I have fetched numbers of confirmed, recovered, and deaths from the API and stored them to state variable using useState. Then I used the state variable as an array for chart js data properties. But the bars of the chart isnt showing. Like the value of the data property isnt set properly. Here look at my code.

const [confirmedpeople, setconfirmedpeople] = useState('')
const [recoveredpeople, setrecoveredpeople] = useState('')
const [deathspeople, setdeathspeople] = useState('')

const url= `https://covid19.mathdro.id/api`;
const fetchData= async()=>{
try {
const datas= await axios.get(url)
setconfirmedpeople(datas.data.confirmed.value)
setrecoveredpeople(datas.data.recovered.value)
setdeathspeople(datas.data.recovered.value)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
fetchData()
}, [])


return (
<>
<Bar
data= {{
labels:['confirmed', 'recovered', 'deaths'],
datasets: [{
label: 'CORONA UPDATE',
data: [{confirmedpeople}, {recoveredpeople}, {deathspeople}],
/>

Answer 1

I am trying to create a corona virus tracker using react and chart js. I have fetched numbers of confirmed, recovered, and deaths from the API and stored them to state variable using useState. Then I used the state variable as an array for chart js data properties. But the bars of the chart isnt showing. Like the value of the data property isnt set properly. Here look at my code.

const [confirmedpeople, setconfirmedpeople] = useState('')
const [recoveredpeople, setrecoveredpeople] = useState('')
const [deathspeople, setdeathspeople] = useState('')

const url= `https://covid19.mathdro.id/api`;
const fetchData= async()=>{
try {
const datas= await axios.get(url)
setconfirmedpeople(datas.data.confirmed.value)
setrecoveredpeople(datas.data.recovered.value)
setdeathspeople(datas.data.recovered.value)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
fetchData()
}, [])


return (
<>
<Bar
data= {{
labels:['confirmed', 'recovered', 'deaths'],
datasets: [{
label: 'CORONA UPDATE',
data: [{confirmedpeople}, {recoveredpeople}, {deathspeople}],
/>