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.
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}`} />;
}