How to add defaultOption to AsyncSelect?

Question

I am using Async react-select for my component and can't solve an issue with default Options . Docs couldn't help me , because there were not such an example related to my issue .

const campaignToOption = campaign => ({value: campaign.id, label: campaign.name});

const loadOptionsWrapper = fetchAll =>
    input => fetchAll({
        _limit: 10000,
        q: input,
        _sort: 'name',
        _order: 'asc',
    }).then(campaigns => _(campaigns).reject('meta').map(campaignToOption).values());

const defaultProps = {
    options: [],
    placeholder: 'Campaign: Not selected',
};

const CampaignFilter = props => {
    return <Async
        defaultOptions={[{label: 'All Campaigns', value: '-2', group: true}]}
        loadOptions={loadOptionsWrapper(props?.actions?.fetchAllCampaigns)}
        {...defaultProps}
        {...props}
    />;
};

export default CampaignFilter;

I want to add an option which will let the users to select all options . So in case of AsyncSelect , options are being loaded asynchronously. Docs say we can use defaultOptions.

The defaultOptions prop determines "when" your remote request is initially fired. There are two valid values for this property. Providing an option array to this prop will populate the initial set of options used when opening the select, at which point the remote load only occurs when filtering the options (typing in the control). Providing the prop by itself (or with 'true') tells the control to immediately fire the remote request, described by your loadOptions, to get those initial values for the Select.

And when us it , i only get that default option in my dropdown like this`

But my goal is to get a component like in this pic `

Your first picture shows an option 'All campaigns', but I don't see how that is added in your code. Looks like you are setting options to an empty array in defaultProps. Where did that 'All campaigns' option come from? Also I think it would be helpful if you can provide a simplified codesandbox. — mehamasum
– mehamasum, Commented Feb 5, 2019 at 13:47

mehamasum · Accepted Answer · 2019-02-05 16:48:23Z

4

I think the best way to achieve your desired result is to add a custom option to whatever campaignToOption returns.

For example you could use this method to append a special option to your array:

const appendSpecialOption = filteredOptions => {
  return [
    { label: "All Campaigns", value: "-2", group: true },
    ...filteredOptions
  ];
};

Keep defaultOptions to True (not an array).

Here is a simplified version of your scenario but I hope it helps:

edited Feb 5, 2019 at 16:48

answered Feb 5, 2019 at 14:15

mehamasum

5,7622 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Norayr Ghukasyan Over a year ago

Looks like it solves the problem and as i looked around and didn't find anything else ... thank

Asking Over a year ago

@mehamasum cold you take a look on this please stackoverflow.com/questions/66303961/…

Asking Over a year ago

@mehamasum it will be very helpful

Collectives™ on Stack Overflow

How to add defaultOption to AsyncSelect?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related