CODEWITHSUNDEEP
reactjstypescript
Michael Gee
Michael Gee

Reputation: 541

Type {children: Element; } has no properties in common with type IntrinsicAttributes

I get an error within react where I am unable to nest components within components. I am getting an error within both the Header component and the Search component. For the Header component I get the error above:

Type {children: Element; } has no properties in common with type IntrinsicAttributes

I am trying to nest components inside components like so:

<Header>
        <Grid>
          <Cell span={3} />
          <Cell span={6}>
            <Search handleUpdateQueryParam={this.handleUpdateQueryParam} />
          </Cell>
          <Cell span={3}>
            <Avatar image="https://pbs.twimg.com/profile_images/624249118114881536/qxn_I_oR_400x400.jpg" />
          </Cell>
        </Grid>
</Header>

And my Header is a stateless component like so:

interface HeaderProps {
  children: any;
}

export const Header: React.FC<HeaderProps> = ({ children }) => {
  return <div className="mll-header">{children}</div>;
};

I don't know why this error shows up unfortunately. If someone could help me that would be really dope!

Upvotes: 8

Views: 12048

Answers (1)

Dzun Ho
Dzun Ho

Reputation: 367

Let wrap your HeaderProps interface with the type "PropsWithChildren" (import it from React).

interface HeaderProps {
  children: any;
}

export const Header: React.FC<PropsWithChildren<HeaderProps>> = ({ children }) => {
  return <div className="mll-header">{children}</div>;
};

Cheer!

Upvotes: 8

Related Questions