marmelab/react-admin · error

<Show> requires either a `render` prop or `children` prop

Error message

<Show> requires either a `render` prop or `children` prop

What it means

React-admin's <Show> component is a layout wrapper; it does not render anything itself unless you tell it what to render via the `render` prop or `children`. When neither is provided, there is nothing to display, so it throws immediately at render time to fail fast instead of rendering an empty page.

Source

Thrown at packages/ra-ui-materialui/src/detail/Show.tsx:82

) => {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX,
    });

    const {
        id,
        resource,
        queryOptions,
        disableAuthentication,
        authLoading = defaultAuthLoading,
        loading,
        error,
        ...rest
    } = props;

    if (!props.render && !props.children) {
        throw new Error(
            '<Show> requires either a `render` prop or `children` prop'
        );
    }

    return (
        <ShowBase<RecordType>
            id={id}
            disableAuthentication={disableAuthentication}
            queryOptions={queryOptions}
            resource={resource}
            authLoading={authLoading}
            loading={loading}
            // Disable redirect on error as it is handled by ShowView to display the error in the ShowView container
            redirectOnError={error ? false : undefined}
            // Disable offline support from ShowBase as it is handled by ShowView to keep the ShowView container
            offline={false}
        >
            <ShowView error={error} {...rest} />

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass children (fields/components) to <Show>, e.g. `<Show><SimpleShowConfiguration>...</SimpleShowConfiguration></Show>`.
2. Alternatively pass a `render` prop: `<Show render={record => <div>...</div>} />`.
3. If you want automatic inference, use `<ShowGuesser>` or <Show> with an inferred child instead of an empty <Show>.

Example fix

// before
<Show resource="posts" />

// after
<Show resource="posts">
  <SimpleShowLayout>
    <TextField source="title" />
  </SimpleShowLayout>
</Show>

const canRenderShow = !!(props.children || props.render);
if (!canRenderShow) throw new Error('<Show> needs children or render');

const hasShowContent = (p: { children?: React.ReactNode; render?: (r: any) => React.ReactNode }): p is typeof p & { children: React.ReactNode } | typeof p & { render: (r: any) => React.ReactNode } => Boolean(p.children ?? p.render);

When it happens

Trigger: Rendering <Show> (or <ShowBase>-backed <Show>) without passing either a `children` prop (e.g. child fields) or a `render` prop (function returning UI). e.g. `<Show>{...}</Show>` with children accidentally removed, or `<Show resource="posts" />` used as a bare route element.

Common situations: Refactoring from the old guesser-based <Show> (children optional via ShowGuesser) to the newer API where children/render is mandatory; copying a route definition where the JSX body was deleted; TypeScript not catching it because props were spread or cast as any.

Related errors

• <InfiniteList> was called outside of a ResourceContext and w
• useListController requires a non-empty resource prop or cont
• useShowController requires a non-empty resource prop or cont
• <ShowBase> requires either a `render` prop or `children` pro
• the value prop is required at runtime

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