Undefined flag emoji about coronavirus-map-dashboard HOT 6 CLOSED

Interesting. If you don't mind waiting, I'll take a look tomorrow and tinker with a bit to see if I can get it to work. Thanks for the tip,I really appreciate the guidance

from coronavirus-map-dashboard.

Had the same issue after I built off your first tutorial. I destructed the info from the API so I could pull the wiki link to the PNGs itself (lines 46, 49-50) and it pulls an enigma flag to show it doesn't have a flag attached to it:

I know you said you'd rather it blank if no flag, but I thought this flag it showed kept the formatting consistent.

If you think this isn't what you're going for aesthetically, then I can take a look and see what I can figure out

from coronavirus-map-dashboard.

@crc8109 im okay either way! mostly wanted to fix the undefined issue. was only thinking of not showing a flag at all since it doesn't really have the right one there, but that represents that. if you want to take a stab at it you can choose :)

from coronavirus-map-dashboard.

@colbyfayock I took a look and it seems the main issue is getEmojiFlag. The API has MS Zaandam's country code as null. So when the function reads the code, it returns an undefined.

I'm honestly very very new to web dev, so I can't exactly figure out how to fix it. But I think destructuring the info under 'country info' so that 'flag', not country code is pulled. And then making the container with the stats pull the url for the png and setting that as an img tag.

https://github.com/crc8109/COVID19-World-Tracker/blob/master/src/pages/index.js

I probably didn't explain this too well but lines 46, 49-50, & 102 are what I'm trying to say.

Sorry I wasn't much help. But hopefully you're able to figure out how to manipulate getEmojiFlag so it returns something other than undefined

from coronavirus-map-dashboard.

no problem at all! what if we did something like:

let header = country;

if ( flag ) {
  header = `<img src="${flag}"> ${header}`;
}

Then inside the stats HTML we could do:

const stats = `
        <span class="icon-marker-tooltip">
          <h2>${header}</h2>

If you'd rather me hop in and fix it I can do that too :) but in case you wanted to take a shot

from coronavirus-map-dashboard.

looks like it now shows a ? emoji flag so it's fixed ✅

from coronavirus-map-dashboard.