Reputation: 193
I'm using semantic UI react css library and i need to change the dropdowns' background color when someone select an option.
<Dropdown
placeholder='Name'
selection
search
options={names}
className='filter-dropdown'
/>
Upvotes: 0
Views: 101
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