loading...

Discussion

markdown guide
 

You should simply call your useStats hook in the IndexPage component

import React from 'react';
import Stats from './Stats';
import Graph from './Graph';
import LastUpdate from './LastUpdate';
import useStats from './useStats';

function IndexPage() {
    const stats = useStats();
    return (
        <div>
            <h1 className="header">Covid-19 stats in italy</h1>
            <LastUpdate />
            <Stats stats={stats}/>
            <Graph />
            <footer className="footer">Credits to <a href="https://covid19.mathdro.id/api/" target="_blank" rel="noopener noreferrer">Mathdroid</a> for the data</footer>
        </div>
    );
}

export default IndexPage;

so this is how your IndexPage Component should look now and is passing down the stats as a prop to the Stats component

in your Stats component you should get the stats out of the props

import React from 'react';
import useStats from './useStats';

function Stats( {stats} ) {
    if (!stats) return <p>Loading...</p>;
    return (
        <div style={statGrid}>
            <div style={statBlock}>
                <h3>Total cases:</h3>
                <span>{stats.confirmed.value}</span>
            </div>
            <div style={statBlock}>
                <h3>Recovered:</h3>
                <span>{stats.recovered.value}</span>
            </div>
            <div style={statBlock}>
                <h3>Deaths:</h3>
                <span>{stats.deaths.value}</span>
            </div>
        </div>
    );
}

export default Stats;

something like this should work and the same for all the other child components of IndexPage

 

Perfect, many thanks. I was getting lost in a glass of water.