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?
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>;
};