text: import React from "react";
  import { Cards, Charts, CountryPicker } from "./components";
  import styles from "./App.module.css";
  import { fetchData } from "./api";
  
  import logo from "./images/logo.png";
  
  class App extends React.Component {
    state = {
      data: {},
      country: "",
    };
    async componentDidMount() {
      const fetcheddata = await fetchData();
      this.setState({ data: fetcheddata });
    }
  
    handleCountryChange = async (country) => {
      const fetchedData = await fetchData(country);
      this.setState({ data: fetchedData, country: country });
      //fetch the data
      //set the state
    };
  
    render() {
      const { data, country } = this.state;
  
      return (
        <div className={styles.container}>
          <img src={logo} className={styles.image} alt="COVID-19" />
          <Cards data={data} />
          <CountryPicker handleCountryChange={this.handleCountryChange} />
          <Charts data={data} country={country} />
        </div>
      );
    }
  }
  
  export default App;
  