reactjs - React Semantic-UI: Dropdown.Menu / Problem

Question

I am trying to build a language selector dropdown showing the flag symbols of the languages - in the menu when it is not opened as well as in the opened menu. I would not like to show any texts.

I am using inline style to style my components in my app, therefore I would like to define the menu style as well via style={myStyle}, else the opening dropdown menu won't be affected by the style in the component.

<Dropdown
  value={value}
  selection
  compact
  style={myStyle}
  onChange={getLanguage} // could be removed
  options={countryOptions}
>
 <Dropdown.Menu style={myStyle} >
   {countryOptions.map( country => {
     return (
       <Dropdown.Item key={country.key} value={country.value} flag={country.flag} onClick={getLanguage} />
          )
    })}
  </Dropdown.Menu>
</Dropdown>

I use the code above and it works for me, the only problem is, that I get the error message, that I cannot use <Dropdown.Items> and options in the component at the same time:

Warning: Failed prop type: Prop `selection` in `Dropdown` conflicts with props: `children`. They cannot be defined together, choose one or the other.

My problem without using the options is, that I don't know how to set the active item in the component. Without the options it seems, it is not possible to display the current value inside this component.

What am I missing or doing wrong? Is it possible at all to set the current value without using options? Can I ignore the error message?

Thank you a lot for your help.

question from:https://stackoverflow.com/questions/65876285/react-semantic-ui-dropdown-menu-problem

Answer 1

I think what you're asking for is to set active prop on the Dropdown.Item, with a test to see if the Item value matches the set value for the dropdown.

<Dropdown
  value={value}
  compact
  style={myStyle}
  selection
  onChange={getLanguage} // could be removed
  options={countryOptions}
>
 <Dropdown.Menu style={myStyle} >
   {countryOptions.map( country => {
     return (
       <Dropdown.Item 
            key={country.key} 
            value={country.value} 
            active={(value === country.value)}
            flag={country.flag} 
            onClick={getLanguage} 
       />)
    })}
  </Dropdown.Menu>
</Dropdown>