marmelab/react-admin · error · Error

If you provided a React element for the optionText prop, yo

Error message

If you provided a React element for the optionText prop, you must also provide the inputText prop (used for the text input)

What it means

When optionText is a React element, AutocompleteInput cannot derive plain text to display inside the MUI TextField while the user types. The library requires an explicit inputText function/prop that converts a choice into a string, and throws in a useEffect if it is missing.

Source

Thrown at packages/ra-ui-materialui/src/input/AutocompleteInput.tsx:303

    useEffect(() => {
        if (emptyValue == null) {
            throw new Error(
                `emptyValue being set to null or undefined is not supported. Use parse to turn the empty string into null.`
            );
        }
    }, [emptyValue]);

    useEffect(() => {
        // eslint-disable-next-line eqeqeq
        if (isValidElement(optionText) && emptyText != undefined) {
            throw new Error(
                `optionText of type React element is not supported when setting emptyText`
            );
        }
        // eslint-disable-next-line eqeqeq
        if (isValidElement(optionText) && inputText == undefined) {
            throw new Error(`
If you provided a React element for the optionText prop, you must also provide the inputText prop (used for the text input)`);
        }
        if (
            isValidElement(optionText) &&
            !isFromReference &&
            // eslint-disable-next-line eqeqeq
            matchSuggestion == undefined
        ) {
            throw new Error(`
If you provided a React element for the optionText prop, you must also provide the matchSuggestion prop (used to match the user input with a choice)`);
        }
    }, [optionText, inputText, matchSuggestion, emptyText, isFromReference]);

    useEffect(() => {
        warning(
            /* eslint-disable eqeqeq */
            shouldRenderSuggestions != undefined && noOptionsText == undefined,
            `When providing a shouldRenderSuggestions function, we recommend you also provide the noOptionsText prop and set it to a text explaining users why no options are displayed. It supports translation keys.`

View on GitHub (pinned to 051f511bb0)

Solutions

1. Add an inputText prop, e.g. inputText={choice => choice.name}, returning a plain string
2. Alternatively use a function optionText that returns a string instead of a React element
3. If inside a ReferenceInput, ensure optionText is passed in a form the reference input supports (function or string)

Example fix

// before
<AutocompleteInput source="author_id" optionText={<Option />} />
// after
<AutocompleteInput source="author_id" optionText={<Option />} inputText={choice => choice.fullName} matchSuggestion={...} />

import { isValidElement } from 'react';
if (isValidElement(optionText) && inputText === undefined) {
  throw new Error('element optionText requires inputText');
}

const hasInputText = (
  p: AutocompleteInputProps
): p is AutocompleteInputProps & { inputText: NonNullable<AutocompleteInputProps['inputText']> } =>
  p.inputText !== undefined;

try {
  render(<AutocompleteInput optionText={<Option />} />);
} catch (e) {
  console.warn('Falling back to string optionText:', e.message);
  render(<AutocompleteInput optionText="name" />);
}

When it happens

Trigger: Passing a JSX element as optionText without also passing inputText on a standalone AutocompleteInput (not wrapped in ReferenceInput).

Common situations: Custom option rendering (avatars, two-line options) configured but the developer forgot that the collapsed input needs a string representation; commonly seen when copying examples that use ReferenceInput, where isFromReference bypasses this check.

Related errors

• optionText of type React element is not supported when setti
• If you provided a React element for the optionText prop, yo
• <ReferenceArrayFieldBase> requires either a 'render' prop or
• <ReferenceFieldBase> requires either a 'render' prop or 'chi
• <ReferenceManyFieldBase> requires either a 'render' prop or

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