Typescript React Functional Component with props.children

Question

I'm trying to make a component that will show a loading circle when the prop isLoading is true, and otherwise show the child component. I'd like to use the component in other components likes this...

import Loading from './Loading.tsx'

...

const [isLoading,setLoading] = React.useState(false);

return (
<Loading isLoading={isLoading}>
     <div>this component will show when loading turns to true</div>
</Loading> );

I'm getting the typscript error

Type '({ isLoading, color, children, }: PropsWithChildren<LoadingProps>) => Element | { children: ReactNode; }' is not assignable to type 'FunctionComponent<LoadingProps>'.

Type 'Element | { children: ReactNode; }' is not assignable to type 'ReactElement<any, any> | null'.
    Type '{ children: ReactNode; }' is missing the following properties from type 'ReactElement<any, any>': type, props, key  TS2322

Can someone point out what I'm doing wrong?


    import React, { FunctionComponent } from 'react';
    import { CircularProgress } from '@material-ui/core';

    type LoadingProps = {
        isLoading: boolean;
        color: 'primary' | 'secondary' | 'inherit' | undefined;
    };

    const Loading: FunctionComponent<LoadingProps> = (props) => {
    
        if(props.isLoading){
            return <CircularProgress color={props.color || 'primary'} />
        }
    
        return props.children;
    };

    export default Loading;

sam256 · Accepted Answer · 2020-09-11 20:06:28Z

4

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.

answered Sep 11, 2020 at 20:06

sam256

1,43110 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luis Paulo Pinto · Accepted Answer · 2020-09-11 20:12:25Z

4

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

answered Sep 11, 2020 at 20:12

Luis Paulo Pinto

6,0864 gold badges23 silver badges37 bronze badges

Comments

CodingYourLife · Accepted Answer · 2022-01-21 22:54:01Z

-1

The link of @sam256 is right but it says that there is a new syntax via React.FunctionComponent where children are implicit.

New syntax:

const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title,
}) => <div title={title}>{children}</div>;

Should work like this:

<Title title="my string">
    <div>Implicit child</div>
</Title>

answered Jan 21, 2022 at 22:54

CodingYourLife

8,7748 gold badges62 silver badges75 bronze badges

Collectives™ on Stack Overflow

Typescript React Functional Component with props.children

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related