I am completely new to react.js. This is a first project on react and I am just following the YouTube tutorials to create a covid-19 tracker application. I have build many components. I have to display a chart for that I have created chart.jsx
file.
I am getting an unexpected error and I cannot resolve it but the tutor does not get that error in tutorial. I don't know what I am doing wrong. I am leaving the code below.
https://www.youtube.com/watch?v=khJlrj3Y6Ls&t=2279s At 45:35
you can see it in tutorial at 45:35
This is the error I am getting and I know I am just making a silly mistake but I am not getting it.
import React, { useState, useEffect } from 'react';
import { fetchDailyData } from '../../api';
import { Line, Bar } from 'react-chartjs-2';
import styles from './Chart.module.css';
const Chart =() => {
const [dailyData, setDailyData] = useState([]);
useEffect(()=>{
const fetchAPI = async () => {
setdailyData(await fetchDailyData());
}
fetchAPI();
});
const lineChart = (
dailyData.length
?(
<Line
data={{
labels: dailyData.map(({ date })=>date),
datasets: [{
data: dailyData.map(({ confirmed })=>confirmed),
label:'Infected',
borderColor: '#3333ff',
fill:true,
},{
data: dailyData.map(({ deaths })=>deaths),
label:'Infected',
borderColor: 'red',
backgroundColor: 'rgba(255,0,0,0.5)',
fill:true,
}],
}}
/>):null
);
return(
<div className={styles.container}>
{lineChart}
</div>
)
}
export default Chart;
You are missing a >
here:
const fetchAPI = async () = {
It should be:
const fetchAPI = async () => {