React property XXX is missing in type 'YYY' but required in type 'ZZZ'

Question

import { Link } from "react-router-dom";
export interface AvatarSize {
  avatarSize: number;
}

export interface PageInterface extends AvatarSize {
  user: {
    permaLink: string;
  };
}

const data = {
  user: {
    permaLink:
      "https://images.unsplash.com/photo-1590698933947-a202b069a861?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGhhcHB5fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
  },
  avatarSize: 50
};

const App = () => <Page user={data} />; // user is 

const Page = (props: PageInterface) => (
  <PageLayout user={props.user} avatarSize={props.avatarSize} />
);

const PageLayout = (props: PageInterface) => (
  <NavigationBar user={props.user} avatarSize={props.avatarSize} />
);

const NavigationBar = (props: PageInterface) => (
  <Link to={props.user.permaLink}>
    <Avatar avatarSize={props.avatarSize} />
  </Link>
);

const Avatar = (props: AvatarSize) => (
  <div>Avatar Size: {props.avatarSize}</div>
)

export default App;

I just started studying React and the above source throws an error but I have no idea how to sort this out. I think it might be related to typescript interface not react.

score 1 · Accepted Answer · answered Sep 19 '21 at 08:56

Actually you have defined interface of data not page props. There are two things which you can do to fix it, either change the type of props or send user and avatarSize directly into props.

Approach 1:

const Page = (props: { user: PageInterface }) => (
  <PageLayout user={props.user.user} avatarSize={props.user.avatarSize} />
);

Approach 2: (Recommended)

const App = () => <Page user={data.user} avatarSize={data.avatarSize} />;

React property XXX is missing in type 'YYY' but required in type 'ZZZ'

1 Answers1