html 5, scss, reactjs

From the data, each country has cca3 that has the abbreviations. You can use this to your advantage by using the current cca3 to return the whole country object. This can then be used to create the details for that particular country. In short, after clicking a border, you can get the innerHTML and check its cca3 from the data (use the lowercase version compared with name.common). after getting the country that matches the name, use the country's object to create the detailed contents. I hope you get the idea