frontendreact-typescriptpolaris

Type '{ children: never[]; title: string; content: Element; }' is not assignable to type 'IntrinsicAttributes & { title: any; }'


I am working on react website in typescript. I am using polaris wizard component, for that I have made on custom component called in which want to pass two arguments. but when I am calling that component in wizard.tsx , I am getting below error in .tsx file where I am using that component (i.e wizard.tsx).

Type '{ children: never[]; title: string; content: Element; }' is not assignable to type 'IntrinsicAttributes & { title: any; }'. Property 'children' does not exist on type 'IntrinsicAttributes & { title: any; }'.

//wizard.tsx (file in which <CustomContainer> has been called.)


                         <CustomContainer
                            title = {"Organization information"}
                            content= {
                            <div>
                                Name of organisation
                                </div>
                            </div>
                            }
                            >
                        </CustomContainer>
//Wizard.tsx


const CustomContainer = ({title}:{title:any}, {content}:{content:any}) => {
    return (
        <Container
            header={
                <Header
                    variant="h2"
                >
                    {title}
                </Header>
            }
        >
            {content}
        </Container>
    );
}

export default CustomContainer;

Any suggestions what I am missing?


Solution

  • This is not how attributes should be passed. It should work if you change customContainer to this.

    const CustomContainer = ({ content, title }: { content: any; title: any }) => {
        return <div id={title}>{content}</div>;
    };