AsyncSelect does not change loading message nor no option message (react-select library)

user_7186666 0
Viewed 2652

I've been trying to customize react-select AsyncSelect loading message and no option message, but so far no luck.

Here's my current code:

                    <AsyncSelect
                        noOptionsMessage={() => 'nothing found'}
                        LoadingMessage={() => 'searching...'}
                        cacheOptions
                        loadOptions={searchForPointsOfInterest}
                        getOptionLabel={(option) => option.name}
                        getOptionValue={(option) => option}
                        defaultOptions
                        isRtl={true}
                        isClearable={true}
                        placeholder="example"
                        isLoading={isLoading}
                        onChange={onPointOfInterestChange}
                        defaultValue={props.area}
                    />
react-select reactjs
2 Answers

I have prepared the sandbox. Please, check it out. Except wrong loadingMessage prop name i don't see a mistakes.

user_115976640

It should be like

<AsyncSelect
    noOptionsMessage={() => 'nothing found'}
    loadingMessage={() => 'searching...'}   //minor type-O here
    cacheOptions
    loadOptions={searchForPointsOfInterest}
    getOptionLabel={(option) => option.name}
    getOptionValue={(option) => option}
    defaultOptions
    isRtl={true}
    isClearable={true}
    placeholder="example"
    isLoading={isLoading}
    onChange={onPointOfInterestChange}
    defaultValue={props.area} />

If your problem not solved add further details of loadOptions and onChange in your question.

user_73441640
Related