marmelab/react-admin · error

To create a new option, you must pass an onCreate function o

Error message

To create a new option, you must pass an onCreate function or a create element.

What it means

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.

Source

Thrown at packages/ra-core/src/controller/input/useSupportCreateSuggestion.tsx:89

                              item: filter,
                              _: createItemLabel,
                          })
                        : createItemLabel(filter)
                    : typeof createLabel === 'string'
                      ? translate(createLabel, { _: createLabel })
                      : createLabel
            );
        },
        handleChange: async (eventOrValue: MouseEvent | any) => {
            const value = eventOrValue?.target?.value || eventOrValue;
            const finalValue = Array.isArray(value) ? [...value].pop() : value;

            if (finalValue?.id === createValue || finalValue === createValue) {
                if (!isValidElement(create)) {
                    if (!onCreate) {
                        // this should never happen because the createValue is only added if a create function is provided
                        // @see AutocompleteInput:filterOptions
                        throw new Error(
                            'To create a new option, you must pass an onCreate function or a create element.'
                        );
                    }
                    const newSuggestion = await onCreate(filter);
                    if (newSuggestion) {
                        handleChange(newSuggestion);
                        return;
                    }
                } else {
                    setRenderOnCreate(true);
                    return;
                }
            }
            handleChange(eventOrValue);
        },
        createElement:
            renderOnCreate && isValidElement(create) ? (
                <CreateSuggestionContext.Provider

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass a valid onCreate function: <AutocompleteInput onCreate={(filter) => ({ name: filter })} />
2. Or pass a valid React element to `create`: create={<CreateTagDialog />} (the component must use useCreateSuggestionContext)
3. If using both, ensure `create` is a real element (jsx) and onCreate is a real function, not a string or component reference
4. Check custom filterOptions logic is not adding the createValue when neither prop is valid

Example fix

// before
<AutocompleteInput source="tag" create={CreateTag} onCreate={undefined} />
// after
<AutocompleteInput source="tag" onCreate={(filter) => ({ name: filter })} />

const createSuggestionOk = (props) => props.onCreate != null || /* isValidElement check */ (props.create && typeof props.create === 'object' && props.create.type !== undefined);
if (!createSuggestionOk(inputProps)) throw new Error('AutocompleteInput needs onCreate or a valid create element');

import { isValidElement } from 'react';
const hasCreateSupport = (p) => typeof p.onCreate === 'function' || isValidElement(p.create);

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• useReferenceFieldController: missing reference prop. You mus
• useShowController requires an id prop or a route with an /:i
• useNextPrevController was called outside of a ResourceContex
• <InfiniteListBase> requires either a 'render' prop or 'child
• <ListBase> requires either a 'render' prop or 'children' pro

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/c4093a19f7350629. Report an issue: GitHub.