Replace emoji character by real flag emoji

components/teks/teks-drawer.js

@@ -135,15 +135,15 @@ const langToArray = anTeks => {
     const {francais, english, espagnol} = anTeks.tradiksyon
 
     if (francais) {
-      langArray.push({title: 'Traduction', emoji: '🇫🇷', lang: francais})
+      langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
     }
 
     if (english) {
-      langArray.push({title: 'Translation', emoji: '🇬🇧', lang: english})
+      langArray.push({title: 'Translation', flag: 'en', lang: english})
     }
 
     if (espagnol) {
-      langArray.push({title: 'Traducción', emoji: '🇪🇸', lang: espagnol})
+      langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
     }
   }
 
@@ -321,11 +321,25 @@ export default function TeksDrawer({teks, anTeks, komante}) {
                   </Typography>
                 </div>
               </Grid>
-              {langArray.map(({title, emoji, lang}) => (
+              {langArray.map(({title, flag, lang}) => (
                 <Grid key={title} item xs={12} md={6}>
                   <div className={classes.gridText}>
                     <Typography align='center' className={classes.text} variant='h4'>
-                      <span dangerouslySetInnerHTML={{__html: emoji}} /> {title}
+                      {flag === 'fr' && (
+                        <span>
+                          🇫🇷
+                        </span>
+                      )}
+                      {flag === 'en' && (
+                        <span>
+                          🇬🇧
+                        </span>
+                      )}
+                      {flag === 'es' && (
+                        <span>
+                          🇪🇸
+                        </span>
+                      )} {title}
                     </Typography>
                     <Typography paragraph align='justify' component='span'>
                       {formatJsonString(lang)}