network connection checking in react

Question

I have low internet so my code is'not working.
When I try to fetch data from local server, it comes to me if I have good connection, but if it is a weak connection I got some error on web page.

TypeError: Cannot read property 'map' of undefined

I want to write list of some music's which I have in DB with map function but i got this error.

so I want to provide this kind of error more beautifully not like this one for users, maybe it is some package or somthing thats helps me give me some advice.

mussic list display function

displayMussics() {
        var data = this.props.data;
        if(data.loading){
            return (
              <Dimmer active inverted>
                <Loader inverted content='Loading' />
              </Dimmer>
            )
        } else {
            return data.mussics.map(mussic => {
                return (
                    <li key={ mussic.id }>{ mussic.name }</li>
                );
            })
        }
    }

If you want to check if user is online or offline you could do something like this https://stackoverflow.com/a/29802862/2445295. But if you want to check if the network call failed because of network error you could write an interceptor for fetch API. — user93, May 16 '19 at 07:31
u should append ur code in the question, not as answer, +, ensure that ur `this.props.data` do have the array that u want, else it hit error — Se0ng11, May 16 '19 at 07:37

score 0 · Answer 1 · answered May 16 '19 at 08:17

0

maybe it is some package or somthing

Apollo client has this possibility. <Query/> component provides networkStatus prop - this is descibed in docs.

answered May 16 '19 at 08:17

xadm

8,219
3
14
25

network connection checking in react

1 Answers1