Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js)

What people said

Recommends Fazil Mahesania · 2020-05 · Stack Overflow · on “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. [this video] 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. [LINK] import React, { useState, useEffect } from 'react'; import { fetchDailyData } from '../../api'; import { Line, Bar }

Cites rawrstar · 2020-04 · Stack Overflow · on “How to map two different data values from api in react js”

I am following [LINK] [this video] So in this project the following api is used- [LINK] here I am getting covid cases values for each day. I need to display the number of cases that increased from yesterday to today so I am trying to get values of current date confirmed cases(total cases)- yesterday's date confirmed cases this is my card.jsx file: import React from "react"; import { Card, CardContent, Typography, Grid } from "@material-ui/core"; import CountUp from "react-countup"; import cx from "classnames"; import styles from "./Cards.module.css"; const Info = ({ data: { confirmed, recovered, deaths, lastUpdate } }) => { if (!confirmed) { return "Loading..."; } return ( <div className={styles.

Cites CHHABRA · 2020-04 · Stack Overflow · on “Module not found: how can i solve it”

hey i was watching the youtube video in it he was trying the new way of linking for hime it works and for me it shows the error video link : [this video] time stamps are from 12:00 to 13:29 and the folder structure is also the same error showing is : Module not found: Can't resolve './Component' in 'C:\Users\dell\OneDrive\Desktop\react learn\covid-19\src' and the app.js is import React, { Component } from 'react'; import {Cards,Charts,CountryPicker} from './Component'; class App extends Component { render() { return ( <div> <h1>here is me the app</h1> </div> ); }} export default App; index.js in component folder is export {default as Cards } from './Cards/Cards'; export {default as Charts } from

Cites rawrstar · 2020-04 · Stack Overflow · on “How to display charts in react js”

[this video] I am following this tutorial here in there is a page on which chart data is shown, I want to display a duplicate line chart called "linechart2" just below the linechart.. this is my index.js of chart file import React, { useState, useEffect } from "react"; import { Line, Bar } from "react-chartjs-2"; import { fetchDailyData } from "../../api"; import styles from "./Chart.module.css"; const Chart = ({ data: { confirmed, recovered, deaths }, country }) => { const [dailyData, setDailyData] = useState({}); useEffect(() => { const fetchMyAPI = async () => { const initialDailyData = await fetchDailyData(); setDailyData(initialDailyData); }; fetchMyAPI(); }, []); const barChart = confirmed

Cites Shawn · 2020-05 · Stack Overflow · on “React - Card Doesn't Show up”

I am a beginner in React. I am going through a very interesting React project, called Covid-19 tracker, on [this video] . I am facing an issue at 36:21, I am supposed to see Card like this: [LINK] Instead, I am seeing Card like this: [LINK] As you can see, the cards displaying the number of infected people are not showing up. How can I fix the issue? Here are my codes in Cards.jsx file: import React from 'react'; import {Card, CardContent, Typography, Grid } from '@material-ui/core'; import CountUp from 'react-countup'; import styles from './Cards.module.css'; const Cards = ({data: {confirmed, recovered, deaths, lastUpdate} }) => { if(!confirmed){ return 'Loading...'; } return( <div className={st

Cites Fazil Mahesania · 2020-05 · Stack Overflow · on “How to resolve Cannot read property 'length' of undefined 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. The error is TypeError: Cannot read property 'length' of undefined When i tried to remove .length from my code, the application started running again but i was unable to display chart. I don't know what I am doing wrong. I am leaving the code below. [this video] At 56:00 you can see it in tutorial at 56:00 I am getting the list errors and I know

Cites Max Miller · 2020-06 · Stack Overflow · on “How can I resolve a TypeError where the property of length is undefined, when I have brackets set up to take in a string?”

I am building my first react application and following a video from the page JavaScript Mastery ( [this video] ). This project teaches me how to build a chart in react using data from an API to display global Covid-19 data. I tried to put the data into an empty array and loop through it using 'dailyData.length' but I keep getting a TypeError with length being undefined. Here is my Chart.jsx 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([]); //here is where I set up the empty array. useEffect(()=> { cons

Cites Not Me. · 2020-06 · Stack Overflow · on “Error provides .render not a function in ReactJS. App.js is not running properly on LocalHost”

The code in index.js import React from "react"; import ReactDOM from "react"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("root")); The code in App.js import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>App</h1> </div> ) } } export default App; I'm currently following a Youtube Tutorial link: [this video] As you will notice at 7:45, the video creator has the same code as I do, however, for some reason his app works when running it but mines doesn't. I'm new to React and have understanding of the main concepts by working through this document [LINK] . I would love your help on identifying why my app is not working and when runn

Cites Alejandro Dinamarca · 2020-07 · Stack Overflow · on “Value in countUp and even in typography not updating”

I'm trying to modify the proyect of { [this video] } to my country, so, instead of having countries displayed in the option box and selecting one for updating the value of the cards, I'm trying to achieve to update the numbers when selecting a region, one by one... The options and region names are done. But, when selecting a region the number is not updating and just displays zero, even is receiving the correct data in JSON (and even passing a number it just desplays zero). I'm sorry if I'm a bit ambiguous but I'm newbie in React. How I can achieve this?, it just displays zero... And I have a lot of hours trying to resolve this. Thanks and also, the 99% of the work is from the tutorial of JavaScr