Provide extra props to fallback component

I would like to pass extra props into the fallback component.

My use case:

const _Uploader = lazy(() => import('uploader'));

type Props = { onRequestClose: () => void };
const Uploader: SFC<Props> = props => (
  <ErrorBoundary FallbackComponent={MyErrorComponent}>
    <Suspense fallback={<MyLoadingComponent {...props} />}>
      <_Uploader {...props} />
    </Suspense>
  </ErrorBoundary>
);

I want my fallback component, MyErrorComponent, to receive the prop onRequestClose, in the same way I provide it to MyLoadingComponent.

Perhaps the fallback component should be provided as a render prop instead of as a Component?

props => <ErrorBoundary fallback={
  ({ error }) => <MyErrorComponent error={error} {...props} />
} />

[kentcdodds]

We’re implementing a new fallbackRender prop which will allow you to do whatever you’d like:

<ErrorBoundary fallbackRender={props => <YourErrorFallback {...props} your="extra props" />}>
  ...
</ErrorBoundary>

[bvaughn]

What stops you from passing an inline function component currently?

const _Uploader = lazy(() => import("uploader"));

type Props = { onRequestClose: () => void };
const Uploader: SFC<Props> = props => (
  <ErrorBoundary
    FallbackComponent={({ error }) => (
      <MyErrorComponent error={error} onRequestClose={onRequestClose} />
    )}
  >
    <Suspense fallback={<MyLoadingComponent {...props} />}>
      <_Uploader {...props} />
    </Suspense>
  </ErrorBoundary>
);

Here’s an example: https://codesandbox.io/s/zk469wp6jp