How to make partial render of App in React

Question

I'm having a final struggle with my weather app which works as follows -> user chooses country from the list -> user types name of the city filtered by a function which shows only cities belonging to the country.

Since the app relies on importing a big citiesJSON file containing a list of cities to choose from I implemented a loading animation in Header.js which gets replaced with country and city inputs rendered within Body.js after the citiesJSON file was imported in full.

The flow is supposed to work like this:

1) Body.js loads citiesJSON file -> ComponentDidMount runs function which:

a) toggles "display: none' into "display:block" on with cities and countries to choose from an

b) sends a callback parameter (true) back to the parent. The parent App.js then sends this (true) value as a prop to Header.js

c) Header.js receives props and turns off the animation (!true &&

The only problem is it doesn't work at all ;/

The app just loads everything straight away. Is it possible that due to the fact that App.js renders both Header and Body it simply renders everything right away? How do I go around it?

Here's codesandbox with this App =>

https://codesandbox.io/s/stoic-napier-6uf2n?fontsize=14&fbclid=IwAR1G74R4Aak621dbbFT9h8wLrdW6WKTpwDoEkV8eLW3VRLGLLLih1Z24s8k

It was supposed to be an easy app but either I'm to ambitious or I'm doing things wrong here...

https://codesandbox.io/s/stoic-napier-6uf2n?fontsize=14&fbclid=IwAR1G74R4Aak621dbbFT9h8wLrdW6WKTpwDoEkV8eLW3VRLGLLLih1Z24s8k

score 0 · Answer 1 · answered Jul 05 '19 at 11:13

Okay, so I basically fetched big JSON file on ComponentDiDMount and after that I rerender view inside ComponendDidUpdate

componentDidMount() {

    this.fetchCityList();
}


fetchCityList = () => {
    //
    // fetch('https://codewave.com.pl/weatherly_app/json/current.city.list.min.json')
    //
console.log('fetchCityList running')

    fetch('https://codewave.com.pl/weatherly_app/json/current.city.list.min.json')
        .then( res => res.json())
        .then( response =>
            this.setState ({ fetchedCityList: response}))

};

componentDidUpdate(prevProps, prevState, snapshot) {
    if(prevState.dataReady === false) {
        this.setState ({ dataReady: true
    });
        this.props.handleDataFetch(true)
    }}

How to make partial render of App in React

1 Answers1