deepakshrma · April 19, 2020 06:31
diff --git a/covid_table.html b/covid_table.html
 <!doctype html>
 <html class="no-js" lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="app.css">
      <style>
          td {
              border: 1px solid;
          }
      </style>
  </head>

  <body>
      <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

      <div id="root"></div>
      <script type="text/babel">
          // import React, { useState, useEffect } from "react";

          function App(props) {
            const [state, setState] = React.useState({ countries: [], global: {} });
            const [loading, setLoading] = React.useState(false);
            React.useEffect(() => {
              setLoading(true);
              const fetchData = async () => {
                const url = "https://api.covid19api.com/summary";
                const result = await axios.get(url);
                const countries = result.data.Countries;
                const global = result.data.Global;
                setState({ countries, global });
              };
              fetchData();
              setLoading(false);
            }, []);
            const { countries, global } = state;
            if (loading) return "Data is loading";
            if (!countries.length) return "Data not found";
            const headers = Object.keys(countries[0]);
            return (
              <table>
                <thead>
                  {headers.map((head) => (
                    <td>{head}</td>
                  ))}
                </thead>
                <tbody>
                  {countries.map((item) => (
                    <tr>
                      {Object.entries(item).map(([key, value]) => (
                        <td>{value}</td>
                      ))}
                    </tr>
                  ))}
                  <tr>
                    <td>Global:</td>
                    <td></td>
                    <td></td>
                    {Object.entries(global).map(([key, value]) => (
                      <td>{value}</td>
                    ))}
                  </tr>
                </tbody>
              </table>
            );
          }

          ReactDOM.render(
            <App />,
            document.getElementById('root')
          );
        </script>
  </body>
 </html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="app.css">
	<style>
	td {
	border: 1px solid;
	}
	</style>
	</head>

	<body>
	<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

	<div id="root"></div>
	<script type="text/babel">
	// import React, { useState, useEffect } from "react";

	function App(props) {
	const [state, setState] = React.useState({ countries: [], global: {} });
	const [loading, setLoading] = React.useState(false);
	React.useEffect(() => {
	setLoading(true);
	const fetchData = async () => {
	const url = "https://api.covid19api.com/summary";
	const result = await axios.get(url);
	const countries = result.data.Countries;
	const global = result.data.Global;
	setState({ countries, global });
	};
	fetchData();
	setLoading(false);
	}, []);
	const { countries, global } = state;
	if (loading) return "Data is loading";
	if (!countries.length) return "Data not found";
	const headers = Object.keys(countries[0]);
	return (
	<table>
	<thead>
	{headers.map((head) => (
	<td>{head}</td>
	))}
	</thead>
	<tbody>
	{countries.map((item) => (
	<tr>
	{Object.entries(item).map(([key, value]) => (
	<td>{value}</td>
	))}
	</tr>
	))}
	<tr>
	<td>Global:</td>
	<td></td>
	<td></td>
	{Object.entries(global).map(([key, value]) => (
	<td>{value}</td>
	))}
	</tr>
	</tbody>
	</table>
	);
	}

	ReactDOM.render(
	<App />,
	document.getElementById('root')
	);
	</script>
	</body>
	</html>