noOptionsMessage with getOptionLabel in CreatableSelect

[emil-malmgaard-rasmussen]

Hello

Do I really need to cast my object to {label: "", value: ""}?

I'm fetching categories from an endpoint and saving it to useState<CategoryViewModel[]>([])
And then I want to dispaly them in a CreateableSelect, but when i try to do ´getOptionLabel´, suddenly the noOptionsMessage doesn't display the message.
<CreatableSelect ... noOptionsMessage={() => "Write a category to create it."} options={categories} placeholder={"Choose..."} getOptionLabel={(item) => item.name} onCreateOption={handleCreate} ... />
Seems like the component have different renders based on wether or not i use:

1. getOptionLabel
2. getOptionValue
   Both triggers noOptionsMessage in their own way.

[Rall3n]

Hello @emil-malmgaard-rasmussen,

noOptionsMessage is only used if there are no options. But the prompt to create new options is treated as its own option, with a special flag on it. This special option has to be formatted to work with getOptionValue and getOptionLabel with the help of the getNewOptionData prop:

<Creatable
  // Assuming accessors are written to work with shape `{ id, name }`
  getNewOptionData={(inputValue, optionLabel) => ({
    __isNew__: true,
    id: inputValue,
    name: optionLabel
  })}
/>

Additionally you can change the default create prompt with the help of the formatCreateLabel prop.

So no, options don't have to equal the shape { label, value }, but you have to do some configuration for it to work.

[emil-malmgaard-rasmussen]

Ahh thank you, I will give this a try.

I did hower find some side-effect using the library React Hook Form, I'm not sure if it is with React Select or React Hook Form, but i have a list of Controllers, each controller renders a , if I supply the "key={field.id}" to the controller, whenever I append a new controller it clears the Selects, will reproduce and supply the CodeSandbox to React Hook Form. Just wanted to make you aware as well 🙂