CODEWITHSUNDEEP
reactjsreact-reduxreact-select
Madhur
Madhur

Reputation: 1772

how to add title in react select option value <Div> tag

I want to add title on React-select box options value dynamically, I am using react-select library in this.

Code : 

 import * as React from 'react'; import Select from 'react-select';
 import { Dispatch } from 'redux';
 import { QUICK_FILTER_TYPES } from '../../constants';
 import { setQuickFilters } from '../../redux/actions';
 import reactSelectStyles from '../../styles/react-select-styles';
 import { IValueLabelTitleObject } from '../../typedefs/interfaces';

 const **options** = [ QUICK_FILTER_TYPES.STALE_RTS,
     QUICK_FILTER_TYPES.MISSING_RTS, QUICK_FILTER_TYPES.STALE_DPUL,
     QUICK_FILTER_TYPES.MISSING_DPUL,
     QUICK_FILTER_TYPES.STALE_DELIVERY_FORECAST,
     QUICK_FILTER_TYPES.MISSING_DELIVERY_FORECAST,
     QUICK_FILTER_TYPES.LATE_DELIVERIES, QUICK_FILTER_TYPES.UPCOMING_RTS,
     QUICK_FILTER_TYPES.UPCOMING_DPUL,
     QUICK_FILTER_TYPES.UPCOMING_DELIVERIES,
 ].map(v => ({ value: v, label: v, title: v })); 

 <Select
     isMulti menuIsOpen name="quick-filter-select"
     onChange={selectedValues => props.dispatch(
     setQuickFilters(selectedValues as IValueLabelTitleObject[]) ) }
     **options={options}** placeholder="Quick filters"
     styles={reactSelectStyles()} value={props.quickFilters} />

Automatically it add the Div has been made in the option tag

Stale RTS

Upvotes: 2

Views: 5599

Answers (1)

Harikrishnan
Harikrishnan

Reputation: 1097

Seems like below code snippet can help you out.

const Option = (props) => {
  return (
    <Tooltip content={'Customise your option component!'} truncateText>
      <components.Option {...props}/>
    </Tooltip>
  );
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    components={{ Option }}
    options={options}
  />
);

For more details read the react-select documentation on custom options document

Upvotes: 2

Related Questions