Getting a TypeError when selecting worldwide

[romanzuch]

When re-selecting worldwide after choosing a country, I get the error: Unhandled Rejection (TypeError): Cannot read property 'lat' of undefined

(anonymous function)
src/App.js:69
async onCountryChange
src/App.js:64

[romanzuch]

You can - though - fix this if you edit App.js as following:

        countryCode === "worldwide" 
        ? setMapCenter([34.80746, -40.4796])
        : setMapCenter([data.countryInfo.lat, data.countryInfo.long]);
        countryCode === "worldwide"
        ? setMapZoom(3)
        : setMapZoom(4);

[Jennifer-developer]

Hi, I have a very similar issue. Please HELP!!!

I have tried the above conditional codes, but I don't where I supposed to put them.

[mbraeutigam]

@Jennifer-developer You could alternatively check for type of data.countryInfo to be not "undefined" and only set new coordinates if so:

        if (typeof data.countryInfo !== "undefined") {
          setMapCenter([data.countryInfo.lat, data.countryInfo.long]);
        }

But to answer your question, just put @romanzuch's snippet at the end of the onCountryChange function

  const onCountryChange = async (e) => {
    const countryCode = e.target.value;

    const url =
      countryCode === "worldwide"
        ? "https://disease.sh/v3/covid-19/all"
        : `https://disease.sh/v3/covid-19/countries/${countryCode}`;
    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setInputCountry(countryCode);
        setCountryInfo(data);

        countryCode === "worldwide"
          ? setMapCenter([34.80746, -40.4796])
          : setMapCenter([data.countryInfo.lat, data.countryInfo.long]);
        countryCode === "worldwide" ? setMapZoom(3) : setMapZoom(4);
      });
  };

[mbraeutigam]

Maybe a little advice: even if this countryCode === "worldwide" ? setMapZoom(3) : setMapZoom(4); works perfectly fine without any errors in plain Javascript, it is not adviced to use it like that because it decreases the readability of the code.

You usually use ternary operators when assigning its return value to another constant/variable. See here:

const url =
      countryCode === "worldwide"
        ? "https://disease.sh/v3/covid-19/all"
        : `https://disease.sh/v3/covid-19/countries/${countryCode}`;

So, if you want to branch code, it is considered to use

    if (countryCode === "worldwide") {
      setMapZoom(3);
    } else {
      setMapZoom(4);
    }

I do believe this habit comes from JSX, where you could say stuff like

visible ? <ThisComponent /> : <ThatComponent>

but in the end that gets compiled by Babel into something mentioned above.

Please keep in mind: "You write code for your collegues, not for the machine" and "Not everything could be done should be done" (both from Unknown)

[romanzuch]

@Jennifer-developer could you solve your issue? If so, I would close the issue.

@mbraeutigam Thank you very much for your help.

[alex197925]

Hello I will fix tomorrow Отправлено со смартфона Samsung Galaxy. -------- Исходное сообщение --------От: romanzuch notifications@github.com Дата: 18.08.2020 14:29 (GMT+01:00) Кому: CleverProgrammers/react-covid-tracker react-covid-tracker@noreply.github.com Копия: Subscribed subscribed@noreply.github.com Тема: Re: [CleverProgrammers/react-covid-tracker] Getting a TypeError when selecting worldwide (#2) @Jennifer-developer could you solve your issue? If so, I would close the issue. @mbraeutigam Thank you very much for your help.

—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or unsubscribe.

[yogesh0037]

if (countryCode === "worldwide") { setMapCenter([34.80746, -40.4796]); setMapZoom(2); } else { setMapCenter([data.countryInfo.lat, data.countryInfo.long]); setMapZoom(4); }

i was also try this ,but it is not working , it show error.

× Unhandled Rejection (TypeError): Cannot read property 'lat' of undefined (anonymous function) G:/Covid-Tracker/covid19/src/App.js:77 74 | setMapCenter([34.80746, -40.4796]); 75 | setMapZoom(2); 76 | } else {

77 | setMapCenter([data.countryInfo.lat, data.countryInfo.long]); | ^ 78 | setMapZoom(4); 79 | } 80 | View compiled async onCountryChange G:/Covid-Tracker/covid19/src/App.js:67 64 | countryCode === "worldwide" 65 | ? "https://disease.sh/v3/covid-19/all" 66 | : https://disease.sh/v3/covid-19/countries/${countryCode}; 67 | await fetch(url) 68 | .then((response) => response.json()) 69 | .then((data) => { 70 | setCountry(countryCode);

please help me ,

[yogesh0037]

    countryCode === "worldwide"
      ? setMapCenter([34.80746, -40.4796])
      : setMapCenter([data.countryInfo.lat, data.countryInfo.long]);
    countryCode === "worldwide" ? setMapZoom(3) : setMapZoom(4);
  });

};

it is not working also

[mbraeutigam]

@yogesh0037 feel free to use the snippet from my answer above and replace your onCountryChange function with it. The problem relates to a different structure of the response when querying "https://disease.sh/v3/covid-19/all" for all countries instead of calling "https://disease.sh/v3/covid-19/countries/${countryCode}" for a specific country. In the request for all countries there are no such properties called "lat", "lon" in object "countryInfo", so we are setting them manually to a specific location [34.80746, -40.4796].

Snippet:

  const onCountryChange = async (e) => {
    const countryCode = e.target.value;

    const url =
      countryCode === "worldwide"
        ? "https://disease.sh/v3/covid-19/all"
        : `https://disease.sh/v3/covid-19/countries/${countryCode}`;
    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setInputCountry(countryCode);
        setCountryInfo(data);

        countryCode === "worldwide"
          ? setMapCenter([34.80746, -40.4796])
          : setMapCenter([data.countryInfo.lat, data.countryInfo.long]);
        countryCode === "worldwide" ? setMapZoom(3) : setMapZoom(4);
      });
  };

Hope this helps.

[yogesh0037]

Thanks sir 🙏

On Wed, Sep 9, 2020, 6:20 PM Marc Bräutigam notifications@github.com wrote:

@yogesh0037 https://github.com/yogesh0037 feel free to use the snippet from my answer above. the problem relates to a different structure of the response when querying "https://disease.sh/v3/covid-19/all" instead of " https://disease.sh/v3/covid-19/countries/${countryCode}" (for a specific country). In the request for ALL countries there are no such properties called "lat", "lon" in object "countryInfo", so we are setting them manually to a specific location.

const onCountryChange = async (e) => { const countryCode = e.target.value;

const url =
  countryCode === "worldwide"
    ? "https://disease.sh/v3/covid-19/all"
    : `https://disease.sh/v3/covid-19/countries/${countryCode}`;
await fetch(url)
  .then((response) => response.json())
  .then((data) => {
    setInputCountry(countryCode);
    setCountryInfo(data);

    countryCode === "worldwide"
      ? setMapCenter([34.80746, -40.4796])
      : setMapCenter([data.countryInfo.lat, data.countryInfo.long]);
    countryCode === "worldwide" ? setMapZoom(3) : setMapZoom(4);
  });

};

Hope this helps.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CleverProgrammers/react-covid-tracker/issues/2#issuecomment-689541433, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQNUT2GDNU2ZUQXET6ULXTLSE522VANCNFSM4PXV42MQ .

[TerenceCole]

@mbraeutigam - Many thanks! I looked at the GitHub for this tutorial before coding along with it, and you helped me in advance with a problem I didn't even know I was going to have. Kudos to you from the learning community for this and your explanation about it:

    countryCode === "worldwide"
      ? setMapCenter([34.80746, -40.4796])
      : setMapCenter([data.countryInfo.lat, data.countryInfo.long]);
    countryCode === "worldwide" ? setMapZoom(3) : setMapZoom(4);

[mbraeutigam]

@TerenceCole you are very welcome. I am happy to give something back to the community. Happy coding! 😀🤙

[yogesh0037]

Sir, i want work with you , if possible then give me some change

On Thu, Sep 10, 2020, 12:24 AM Marc Bräutigam notifications@github.com wrote:

@TerenceCole https://github.com/TerenceCole you are very welcome. I am happy to give something back to the community. Happy coding! 😀🤙

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CleverProgrammers/react-covid-tracker/issues/2#issuecomment-689751629, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQNUT2A2J74DN5QHOYHWVU3SE7FPHANCNFSM4PXV42MQ .

[vaishnav-yadav]

I had the same issue and I did this and it solved the error 😄

(countryCode === "worldwide")? setMapCenter({ lat: 34.80746, lng: -40.4796 }) : setMapCenter([data.countryInfo.lat, data.countryInfo.long]);