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}</>
);
};