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
- Ensure the component calling useCreateSuggestionContext is passed as the `create` prop of AutocompleteInput (or similar): create={<CreateTagDialog />}
- Do not render the create dialog component manually or on its own route
- 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
- Only call useCreateSuggestionContext inside a component used as the `create` prop
- Never render the create dialog manually or share it as a general-purpose page
- If reuse is needed, split hook usage into a wrapper component dedicated to the create case
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
- useShowContext must be used inside a ShowContextProvider
- useArrayInput must be used inside an ArrayInputContextProvid
- useSimpleFormIterator must be used inside a SimpleFormIterat
- useSimpleFormIteratorItem must be used inside a SimpleFormIt
- useEditContext must be used inside an EditContextProvider
AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30).
Data as JSON: /api/errors/cd73a24f3055e2c3.
Report an issue: GitHub.