Type '{ }' is not assignable to type 'IntrinsicAttributes & {}'

Question

I'm doing the PluralSight intro course on React, and one of the projects in the course involves building a web UI that allows the user to enter a GitHub username, and the app will add the corresponding GitHub profile photo to a list of profiles on the app.

The courses writes everything in standard js, but I am trying to use TypeScript because its what my company uses. I am running into an issue where I want to pass a setState (hook) function reference as a prop to a child component.

Here is the code in the parent component:

function App() {
  const classes = useStyles();
  const [profiles, setProfiles] = React.useState<GitHubData[]>([]);     // **** HOOK HERE

  return (
    <div>
      <Typography variant="h3" className={classes.title}>The Github Cards App</Typography>
      <Divider />
      <Form onSubmit={setProfiles} />          // **** ISSUE IS HERE ****
      <CardList profiles={profiles} />
    </div>
  );
}

I'm using a bunch of material-UI stuff, but the important piece is the <Form onSubmit={setProfiles} /> , which is the function reference that is giving me the error (specified in title).

For more context, here are the relevant interfaces and component definitions:

interface GitHubData {
  name: string,
  avatar_url: string,
  company: string,
  location?: string
}

interface updaterFunction {
  updateProfiles: Dispatch<SetStateAction<GitHubData>>       // From suggestions online
  updateProfiles: (newProfile: GitHubData) => void           // (What I hoped would work)
}

const Form = (props: updaterFunction) => { ... }

The full error is as follows:

Type '{ onSubmit: Dispatch<SetStateAction<GitHubData[]>>; }' is not assignable to type 'IntrinsicAttributes & updaterFunction'.

Property 'onSubmit' does not exist on type 'IntrinsicAttributes & updaterFunction'

What can I do to get rid of it? I've seen a bunch of similar errors online, but none of the proposed solutions have worked for me. Thanks for helping!!

Answer 1

Looks like the problem is that your interface should use the onSubmit key instead of updateProfiles :

interface updaterFunction {
  onSubmit: ...  // try with the options you mentioned
}

That's what the second line seems to indicate in your error message.

By the way, it would make sense to rename your interface to something like FormProps here.