DEV Community

loading...

Trying to lift up state

Manuel Alonge
Founder of MindfulStack | The Mindful Web Developer
・1 min read

Hello, this is the repo I am working on: https://github.com/manuelalonge/covid-19-stats/tree/develop
I am currently trying to move the api call into the IndexPage component and then pass it as a prop to the child components (Graph, LastUpdate) but I am not sure what I am doing wrong.

Can anyone please help me out?
Thanks,
Manuel

Discussion (2)

Collapse
chico1992 profile image
chico1992

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

Collapse
manuelalonge profile image
Manuel Alonge Author

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

Forem Open with the Forem app