Search code examples
reactjsreact-routerreact-hooksreact-componentreact-chartjs

How can I resolve this silly mistake in react.js?


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. enter image description here

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;

Solution

  • You are missing a > here:

    const fetchAPI = async () = {
    

    It should be:

    const fetchAPI = async () => {