Typescript React Functional Component with props.children

It is recommended (see here) to explicitly define the type of your children when using React.FunctionComponents as your function type.

So

type LoadingProps = {
    isLoading: boolean
    color: 'primary' | 'secondary' | 'inherit' | undefined
    children: React.ReactNode
}

This will also ensure correct typing on the return.


That´s because of return props.children.

You should wrapper it with a fragment, like this:

const Loading: React.FC<LoadingProps> = (props) => {
return props.isLoading ? (
    <CircularProgress color={props.color || "primary"} />
  ) : (
    <>{props.children}</>
  );
};