I have a parent and a child functional component as below. The parent component is NavBar.tsx

    interface NavBarType {
  top: number;
}

const NavBar = (props: NavBarType) => {
  const scrollDown = () => {
    window.scrollTo({
      top: props.top,
      behavior: "smooth",
    });
  };

  return (
    <AppBar
      position="static"
      sx={{
        flexDirection: "row",
        justifyContent: "flex-end",
        background: "#7E685A",
      }}
    >
      <Link onClick={scrollDown}>About</Link>

      <Link onClick={scrollDown}>Skills</Link>
      <Link onClick={scrollDown}>Education</Link>
      <Link onClick={scrollDown}>Experience</Link>
      <Link onClick={scrollDown}>Contact Me</Link>
      <Link onClick={scrollDown}>Resume</Link>
    </AppBar>
  );
};

export default NavBar;

The child component is Link.tsx

interface LinkType {
  onClick: React.MouseEventHandler<HTMLElement>;
}

const Link: React.FC<LinkType> = (props: LinkType) => {
  return <Typography onClick={props.onClick} className={classes.Link} />;
};

export default Link;

<Link> in the parent component is throwing an error

Type '{ children: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & LinkType'. Property 'children' does not exist on type 'IntrinsicAttributes & LinkType'.

Not sure why is it throwing this error. I checked the types and all. Couldn't identify it. If someone could help me out, please.

CodePudding user response：

React.FC no longer includes the children property in it's type, so in this case, your LinkType interface only accepts an onClick and nothing else. Also, your Typography element does not have children passed into it either, so to fix this, you'd need to make a couple of changes:

1. Add children to LinkType

interface LinkType {
  children: ReactNode;
  onClick: React.MouseEventHandler<HTMLElement>;
}

2. Render passed children on Typography

const Link: React.FC<LinkType> = (props: LinkType) => {
  return <Typography onClick={props.onClick} children={props.children} className={classes.Link} />;
};

OR

const Link: React.FC<LinkType> = (props: LinkType) => {
  return (
    <Typography onClick={props.onClick} className={classes.Link}>
     {props.children}
    </Typography>
  );
};