This is my first time using react-select
and I have created the dropdown as below (I want this dropdown to be a re-usable component)
//import libraries
import React from 'react';
import Select, { components } from 'react-select';
import classNames from 'classnames';
//import some svg icons using svgr
import Twitter from '@/assets/images/icon-twitter.svg';
import Linkedin from '@/assets/images/icon-linkedin.svg';
import Youtube from '@/assets/images/icon-youtube.svg';
export const PlatformDropdown = (listProps: any) => {
const options = [
{ label: 'Twitter', value: 'Twitter', icon: <Twitter /> },
{ label: 'Linkedin', value: 'Linkedin', icon: <Linkedin /> },
{ label: 'YouTube', value: 'YouTube', icon: <Youtube /> },
{ label: 'Facebook', value: 'Facebook', icon: <Facebook /> },
];
const { Option } = components;
const IconOption = (props: any) => (
<Option {...props}>
<div className="flex items-center gap-2">
<div>{props.data.icon}</div>
{props.data.label}
</div>
</Option>
);
const handleChange = (e: any) => {
listProps.setValue(e.value.toLowerCase());
};
return (
<Select
options={options}
components={{ Option: IconOption }}
className="w-40 mx-auto"
unstyled
isClearable
onChange={handleChange}
value={listProps.value}
classNames={{
control: ({ isFocused }) => 'border border-gray-300 rounded-md',
option: ({ isDisabled, isFocused, isSelected }) =>
classNames(
isSelected && 'text-purple [&_svg]:fill-purple',
)
}}
/>
);
};
The dropdown is working fine but as you can see in the first pic, the icons show on the list for selection. But the icon is NOT seen on the selected item. Can anyone help me fix this issue so that icon is seen on the selected value as well?
[![List][1]][1]
[1]: https://i.sstatic.net/Z4P5IV7m.png