CODEWITHSUNDEEP
javascripthtmlcssreactjssemantic-ui-react
RuLee
RuLee

Reputation: 193

Change dropdown background color on change

I'm using semantic UI react css library and i need to change the dropdowns' background color when someone select an option.

enter image description here to enter image description here

<Dropdown
 placeholder='Name'
 selection
 search
 options={names}
 className='filter-dropdown'
 />

Upvotes: 0

Views: 101

Answers (1)

BlueIcedPen
BlueIcedPen

Reputation: 56

Add the style to the option for each dropdown item on change

The code snippet below should help

const [selected, setSelected] = useState(null)
const originalOptions = [
  {
    index: 1,
    text: "Davey Jones",
    value: "userone",
    style: { backgroundColor: 'red'}
  },
  {
    index: 2,
    text: "Gengar",
    value: "usertwo",
    style: selected ? { backgroundColor: 'red'} : null
  },
  {
    index: 3,
    text: "Frank Booth",
    value: "fbooth",
    style: { backgroundColor: 'red'}
  }
];
const displayOptions = originalOptions.map(option => {
    return 
      {
        ...option,
        style: selected === option.index ? { backgroundColor: 'red'} : null
      }
})

Pass that to your Dropdown component like so

 <Dropdown
   placeholder='Name'
   selection
   search
   className='filter-dropdown'
   options={displayOptions}
   onChange={(value)=>setSelected(value.index)}
   ...
 />

Upvotes: 0

Related Questions