Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttri-CodePudding

I have a simple screen where I use some custom components, but I'm having problems with a ts error:

Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & { className?: string | undefined; }'.

in this file where I import my ContentCenterDiv component:

import LoadingIndicator from './LoadingIndicator';
import ErrorIndicator from './ErrorIndicator';
import React from 'react';
import ContentCenterDiv from './ContentCenterDiv';

export default function LoadingAndErrorCentered({ isLoading, isError, error }: { isLoading: boolean, isError: boolean, error: any }) {
    return (
        <ContentCenterDiv>
            <LoadingIndicator isLoading={isLoading} />
            <ErrorIndicator isError={isError} error={error} />
        </ContentCenterDiv>
    );
}

ContentCenterDiv.tsx:

import React from "react";

export default function ContentCenterDiv({ className, ...others }: { className?: string }) {
    return <div {...others} className={`w-100 d-flex flex-column align-items-center ${className}`} />;
}

To be clear, ContentCenterDiv is a 'container', that means, it's the parent element of one or more components.

CodePudding user response：

With the props type { className?: string } you specify that ContentCenterDiv has no other props than className, which means it also doesn't have a children prop and therefore won't accept children.

You can either manually specify a children?: ReactNode property in the parameter type, or use the generic type React.PropsWithChildren type to add it:

function ContentCenterDiv({ className, ...others }:
  PropsWithChildren<{ className?: string }>) {
    return <div {...others} className={`w-100 d-flex flex-column align-items-center ${className}`} />;
}

TypeScript playground