Type error: JSX element type '{} | null | undefined' is not a constructor function for JSX elements
There is a long term issue regarding ReactNode. I don't understand specifics, but it's something hard-wired in TypeScript itself and is being worked on.
Either way, a solution should be easy. Don't use ReactNode with functional components :) The children
prop is implicitly included in React.FC type.
The same problem goes with returning children. It can be either overcome by wrapping into <React.Fragment>
or <div>
if you prefer, but since it's just a type error, you can convince TypeScript that you know what you are doing :)
import React, { ReactNode } from 'react';
import { CenteredMessage } from './centered-message';
export interface HandleQueryProps {
loading: boolean,
error?: Error,
}
export const HandleQuery: React.FC<HandleQueryProps> = ({ loading, error, children }) => {
if (loading) {
return <CenteredMessage>Loading...</CenteredMessage>;
}
if (error) {
return <CenteredMessage>{error.message}</CenteredMessage>;
}
return children as ReactElement<any>;
};
At this case, it can be more easy simply define children
of type ReactElement
if I am not obviating something.
export interface HandleQueryProps {
loading: boolean,
error?: ApolloError,
children: ReactElement
}