marmelab/react-admin · error · Error

optionText of type React element is not supported when setti

Error message

optionText of type React element is not supported when setting emptyText

What it means

AutocompleteInput validates its prop combinations in a useEffect. optionText can either be a string/field name or a custom React element, but when a React element is supplied, the component can no longer render a plain-text placeholder for the empty choice. Since emptyText must be plain text, react-admin throws immediately rather than rendering a broken option list.

Source

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

    >(field.value, {
        choices: finalChoices,
        // @ts-ignore
        multiple,
        optionValue,
    });

    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]);

View on GitHub (pinned to 051f511bb0)

Solutions

1. Remove the emptyText prop when optionText is a React element, or use a plain string/function for optionText so emptyText is allowed
2. Render the empty state inside your custom option element itself based on the choice value
3. Use the inputText prop plus a function optionText that returns a string for the input, keeping emptyText as a string

Example fix

// before
<AutocompleteInput source="author_id" optionText={<Option />} emptyText="None" />
// after
<AutocompleteInput source="author_id" optionText={<Option />} inputText={choice => choice.name} matchSuggestion={filter => choice => choice.name.includes(filter)} />

import { isValidElement } from 'react';
if (isValidElement(optionText) && emptyText !== undefined) {
  throw new Error('optionText element cannot be combined with emptyText');
}

const isElementOptionText = (v: unknown): v is React.ReactElement =>
  React.isValidElement(v);

try {
  render(<AutocompleteInput source="author_id" optionText={optionText} emptyText={emptyText} />);
} catch (e) {
  console.error('Invalid AutocompleteInput props:', e.message);
  render(<AutocompleteInput source="author_id" optionText={String(optionText)} />);
}

When it happens

Trigger: Passing a JSX element as optionText (e.g. optionText={<MyOption />}) together with any defined emptyText prop on AutocompleteInput.

Common situations: Developers customize option rendering with a React element and separately add an emptyText label for the 'no choice' option (often after migrating from optionValue/optionText string usage), not realizing the two props are mutually exclusive.

Related errors

• If you provided a React element for the optionText prop, yo
• 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/3a86cec470943559. Report an issue: GitHub.