marmelab/react-admin · error

useCreateSuggestionContext must be used inside a CreateSugge

Error message

useCreateSuggestionContext must be used inside a CreateSuggestionContext.Provider

What it means

useCreateSuggestionContext is the hook that custom 'create' dialog components call to get { filter, onCreate, onCancel } from the CreateSuggestionContext. The context is only provided by react-admin's create-suggestion machinery while the create dialog is mounted. This error is thrown when the hook is called outside that provider, so there is no suggestion context to return.

Source

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

    handleChange: (eventOrValue: ChangeEvent | any) => Promise<void>;
    createElement: ReactElement | null;
    getOptionDisabled: (option: any) => boolean;
}

const CreateSuggestionContext = createContext<
    CreateSuggestionContextValue | undefined
>(undefined);

interface CreateSuggestionContextValue {
    filter?: string;
    onCreate: (choice: any) => void;
    onCancel: () => void;
}

export const useCreateSuggestionContext = () => {
    const context = useContext(CreateSuggestionContext);
    if (!context) {
        throw new Error(
            'useCreateSuggestionContext must be used inside a CreateSuggestionContext.Provider'
        );
    }
    return context;
};

export type OnCreateHandler = (filter?: string) => any | Promise<any>;

View on GitHub (pinned to 051f511bb0)

Solutions

  1. Ensure the component calling useCreateSuggestionContext is passed as the `create` prop of AutocompleteInput (or similar): create={<CreateTagDialog />}
  2. Do not render the create dialog component manually or on its own route
  3. If the component is used in multiple places, guard with a conditional call or split into a wrapper for the create case

Example fix

// before
<CreateTagDialog /> // rendered outside the input, hook throws
// after
<AutocompleteInput source="tag" create={<CreateTagDialog />} />
Defensive patterns

Strategy: type-guard

Type guard

import { isValidElement } from 'react';
const isInsideCreateSuggestion = (child) => isValidElement(child) && child.type === CreateTagDialog; // ensure rendered via create={<.../>} prop

Prevention

When it happens

Trigger: Calling useCreateSuggestionContext in a component rendered outside the create-suggestion provider: e.g. in a standalone page, outside an AutocompleteInput's `create` element, or in a component mounted somewhere else (like a regular form or modal not wired through the `create` prop).

Common situations: Reusing the same dialog component both inside an AutocompleteInput `create` prop and elsewhere; rendering the create dialog manually instead of via the `create` prop; missing CreateSuggestionContext.Provider after refactoring; copy-pasting a demo component into a wrong location.

Related errors


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