{"record":{"id":"c4093a19f7350629","repo":"marmelab/react-admin","slug":"to-create-a-new-option-you-must-pass-an-oncreate","errorCode":null,"errorMessage":"To create a new option, you must pass an onCreate function or a create element.","messagePattern":"To create a new option, you must pass an onCreate function or a create element\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/controller/input/useSupportCreateSuggestion.tsx","lineNumber":89,"sourceCode":"                              item: filter,\n                              _: createItemLabel,\n                          })\n                        : createItemLabel(filter)\n                    : typeof createLabel === 'string'\n                      ? translate(createLabel, { _: createLabel })\n                      : createLabel\n            );\n        },\n        handleChange: async (eventOrValue: MouseEvent | any) => {\n            const value = eventOrValue?.target?.value || eventOrValue;\n            const finalValue = Array.isArray(value) ? [...value].pop() : value;\n\n            if (finalValue?.id === createValue || finalValue === createValue) {\n                if (!isValidElement(create)) {\n                    if (!onCreate) {\n                        // this should never happen because the createValue is only added if a create function is provided\n                        // @see AutocompleteInput:filterOptions\n                        throw new Error(\n                            'To create a new option, you must pass an onCreate function or a create element.'\n                        );\n                    }\n                    const newSuggestion = await onCreate(filter);\n                    if (newSuggestion) {\n                        handleChange(newSuggestion);\n                        return;\n                    }\n                } else {\n                    setRenderOnCreate(true);\n                    return;\n                }\n            }\n            handleChange(eventOrValue);\n        },\n        createElement:\n            renderOnCreate && isValidElement(create) ? (\n                <CreateSuggestionContext.Provider","sourceCodeStart":71,"sourceCodeEnd":107,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/controller/input/useSupportCreateSuggestion.tsx#L71-L107","documentation":"react-admin's create-suggestion feature lets users add a new option (e.g. a new choice in an AutocompleteInput) directly from the input. When the user selects the special 'create' value, the component must call either an onCreate function or render a `create` element (via CreateSuggestionContext). This error is thrown at selection time when the chosen value matches the create value but neither an onCreate function nor a valid React element was provided, so there is no way to create the option.","triggerScenarios":"Selecting the 'create new' entry in an AutocompleteInput where the `create` prop is set to something that is not a valid React element AND no `onCreate` function prop is provided. Normally guarded by filterOptions (which only adds the createValue if onCreate or create exists), but can happen if `create` is a non-element value (e.g. a string or a plain object) instead of a <Component/> element, or if the onCreate prop is removed after being present during option filtering.","commonSituations":"Passing `onCreate` spelled incorrectly (e.g. oncreate or onCreate as a string), passing a component reference instead of a rendered element to `create` (create={MyDialog} instead of create={<MyDialog/>}), or upgrading react-admin where the create-suggestion API changed. Also hit when the create value leaked into the option list due to custom filterOptions overrides.","solutions":["Pass a valid onCreate function: <AutocompleteInput onCreate={(filter) => ({ name: filter })} />","Or pass a valid React element to `create`: create={<CreateTagDialog />} (the component must use useCreateSuggestionContext)","If using both, ensure `create` is a real element (jsx) and onCreate is a real function, not a string or component reference","Check custom filterOptions logic is not adding the createValue when neither prop is valid"],"exampleFix":"// before\n<AutocompleteInput source=\"tag\" create={CreateTag} onCreate={undefined} />\n// after\n<AutocompleteInput source=\"tag\" onCreate={(filter) => ({ name: filter })} />","handlingStrategy":"validation","validationCode":"const createSuggestionOk = (props) => props.onCreate != null || /* isValidElement check */ (props.create && typeof props.create === 'object' && props.create.type !== undefined);\nif (!createSuggestionOk(inputProps)) throw new Error('AutocompleteInput needs onCreate or a valid create element');","typeGuard":"import { isValidElement } from 'react';\nconst hasCreateSupport = (p) => typeof p.onCreate === 'function' || isValidElement(p.create);","tryCatchPattern":null,"preventionTips":["Always pass onCreate as a real function, not a string or component reference","Pass create as JSX (<Dialog />), never as a component class reference","Let filterOptions add the createValue only when a valid onCreate/create exists (library default)"],"tags":["react-admin","autocomplete","create-suggestion","missing-prop"],"backgroundTag":"missing-required-prop","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}