Dynamic implementation of Semantic-Ui "Flag" element in my language dropdown

Question

I'm trying to add flags to the language selection menu using the Semantic-Ui Flag element. I'm using React 16.13.1.

When placing a flag segment in the option, the code simply displays [object] in the selection box. I tried to put the flag in a separate div next to it, but I can't make the flag dependent on the currently selected language. How do I hook it? Is there any way to display the flag inside the dropdown menu?


import React from "react";
import { Flag, Segment } from 'semantic-ui-react'

const languages = ['ae', 'ar', 'at', 'au', 'be', 'bg', 'br', 'ca', 'ch', 'cn', 'co', 'cu', 
    'cz', 'de', 'eg', 'fr', 'gb', 'gr', 'hk', 'hu', 'id', 'ie', 'il', 'it', 'jp', 'kr',
    'lt', 'lv', 'ma', 'mx', 'my', 'ng', 'nl', 'no', 'nz', 'ph', 'pl', 'pt', 'ro', 'rs',
     'ru', 'sa', 'se', 'sg', 'si', 'sk', 'th', 'tr', 'tw', 'ua', 'us', 've', 'za']

class Languages extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "pl",
        }
    }
    onValueChange = (e) => {
        const value = e.target.value;    
        this.setState({ value});
        this.props.onLanguageChange(value);
    };

   
    render () {       
        const { value } = this.state;

        return( 
            <select value={value} onChange={this.onValueChange}>
                {languages.map((lang) => (
                    <option key={lang} value={lang}>{lang}<Segment> <Flag name={lang}/> </Segment> </option>))}   
            </select>
        )
    }
}
  
export default Languages;

grenzbotin · Accepted Answer · 2020-06-30 20:06:29Z

0

You can use the Dropdown component from semantic-ui in order to integrate a flag and render the items like:

{languages.map(lang => (
  <Dropdown.Item
    key={lang}
    flag={{ name: lang }}
    value={lang}
    text={lang}
  />
))}

Please see: https://react.semantic-ui.com/modules/dropdown/

Extended example with working state update:

import React, { useState } from "react";
import { Dropdown } from "semantic-ui-react";

const languages = [
  "ae",
  "ar",
  "at",
  "au",
  "be",
  "bg",
  "br",
  "ca",
  "ch",
  "cn",
  "co",
  "cu",
  "cz",
  "de",
  "eg",
  "fr",
  "gb",
  "gr",
  "hk",
  "hu",
  "id",
  "ie",
  "il",
  "it",
  "jp",
  "kr",
  "lt",
  "lv",
  "ma",
  "mx",
  "my",
  "ng",
  "nl",
  "no",
  "nz",
  "ph",
  "pl",
  "pt",
  "ro",
  "rs",
  "ru",
  "sa",
  "se",
  "sg",
  "si",
  "sk",
  "th",
  "tr",
  "tw",
  "ua",
  "us",
  "ve",
  "za"
];

const CustomDropdown = () => {
  const [value, setValue] = useState("za");
  const handleClick = (e, { value }) => {
    setValue(value);
  };

  return (
    <Dropdown text={value} value={value}>
      <Dropdown.Menu>
        {languages.map(lang => (
          <Dropdown.Item
            key={lang}
            flag={{ name: lang }}
            value={lang}
            text={lang}
            onClick={handleClick}
          />
        ))}
      </Dropdown.Menu>
    </Dropdown>
  );
};

export default CustomDropdown;

edited Jun 30, 2020 at 20:06

answered Jun 24, 2020 at 20:14

grenzbotin

2,5651 gold badge14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bogusz Dmowski Over a year ago

Thank you for your response! When I replace select with Dropdown flag works but sadly props don't update and language in my API don't change.

grenzbotin Over a year ago

Ideally you always provide code when running in such a problem. Updated my answer with working example.

Collectives™ on Stack Overflow

Dynamic implementation of Semantic-Ui "Flag" element in my language dropdown

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related