React app working on localhost but giving error when deployed either on github or on heroku. No error while deploying

Question

I create a react app to show corona infection in different countries. This work on my localhost but when i deploy it either on github or on heroku a error generated. below error is given in blockquote. Looking at error when i check file country.js there is no n[0]. please help below is link to hosted app and github repository of the app.

TypeError: "n[0] is undefined" E country.js:13 E country.js:11 React 7 unstable_runWithPriority scheduler.production.min.js:19 React 6 a App.js:22 u runtime.js:45 _invoke runtime.js:274 t runtime.js:97 r asyncToGenerator.js:3 a asyncToGenerator.js:25 react-dom.production.min.js:209:194 React 5 unstable_runWithPriority scheduler.production.min.js:19 React 4 unstable_runWithPriority scheduler.production.min.js:19 React 6 a App.js:22 u runtime.js:45 _invoke runtime.js:274 t runtime.js:97 r asyncToGenerator.js:3 a asyncToGenerator.js:25 TypeError: n[0] is undefined country.js:13:30

​ this is link to hosted app on heroku and this is link to app hosted on Github

This is github repository

Answer 1

As stated by Dishant Desai, it is giving a TypeError. In order to fix it, you can change the code in country.js from

const countryflag = Object.keys(data).map((name) => {
    return data[name][0];
})

to

const countryflag = data[0];

And use it directly this way:

${countryflag[country[0]]}