Async await in react typescript

Question

I am new to react. I am using typescript and below is my package.json

{
  "name": "corona-tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.14",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-countup": "^4.3.3",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "^3.9.3"
  },
  "scripts": {
    "start": "PORT=4006 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Below is my main component:

import React from 'react';
import { Cards, Chart, CountryPicker } from './components';

import styles from './App.module.css';
import { CoronaData, fetchData } from "./api";


class App extends React.Component {

    state: CoronaData = {
        confirmed: 10,
        deaths: 1,
        recovered: 1,
        lastUpdated: '',
    };

    setState(data: CoronaData) {
        this.state = data;
    }

    async componentDidMount() {
        let cData: CoronaData;
        cData = await fetchData();
        this.setState(cData);
    }

    render() {
        return(<div className={styles.container}>
            <h1>
            <Cards confirmed={this.state.confirmed} recovered={this.state.recovered} deaths={this.state.deaths} lastUpdated={this.state.lastUpdated}/>
            <Chart/>
            <CountryPicker/>
        </h1>
        </div>);
}
}

export default App;

And my Cards component is something like this:-

import React from 'react';
import styles from './Cards.module.css';
import { Card, CardContent, Typography, Grid } from "@material-ui/core";
import {CoronaData} from "../../api";

export const Cards: React.FC<CoronaData> = ( { confirmed, recovered, deaths, lastUpdated } ) => {
    return (
        <div className={styles.container}>
            <Grid container spacing={3} justify="center">
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>  Infected  </Typography>
                        <Typography variant="h5"> { confirmed.valueOf() }  </Typography>
                        <Typography color="textSecondary">  REAL DATE  </Typography>
                        <Typography variant="body2"> Number of active cases of Covid-19 </Typography>
                    </CardContent>
                </Grid>
            </Grid>
        </div>
    );
}

But I am not getting the updated state in the Cards component. I was under the impression that child component (Cards in this case) will get re-rendered once the parent state changes. Am I missing something here?

Answer 1

Remove this part from the class and I think you're good to go:

setState(data: CoronaData) {
  this.state = data;
}

setState is the function exposed by react, you don't need to write the definition for it.