add emoji flag to options

ubclaunchpad · Jul 21, 2018 · 87c2ee2 · 87c2ee2
1 parent 0427f2c
commit 87c2ee2
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/client/components/WelcomeModal.js b/client/components/WelcomeModal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, Button, FormControl, FormGroup, ControlLabel } from 'react-bootstrap';
-import countries from '../data/countries';
+import countries from '../data/countries.json';
 
 const listOfCountries = [];
 
@@ -17,9 +17,11 @@ class WelcomeModal extends React.Component {
   }
 
   componentWillMount() {
-    Object.keys(countries).forEach((key) => {
-      listOfCountries.push(<option value={countries[key]}>{countries[key]}</option>);
-    });
+    if (listOfCountries.length === 0) {
+      Object.keys(countries).forEach((key) => {
+        listOfCountries.push(<option value={countries[key]} key={key}>{countries[key]} {key.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397))} </option>);
+      });
+    }
   }
 
   componentDidMount() {
@@ -62,7 +64,7 @@ class WelcomeModal extends React.Component {
                   <ControlLabel> Country</ControlLabel>
 
                   <FormControl componentClass="select" value={this.state.country} onChange={this.handleSelect}>
-                    <option value="None">None</option>
+                    <option value="None" key="None">None</option>
                     {listOfCountries}
                   </FormControl>
                 </FormGroup>