I didn't put function on args of component. What should I fix it? React

Question

Compiler says

const Form = (
  submit: (email: string, password: string) => void, message:string)
  {
  return (//omit//)
  }



  const submitC = (
    userName: string,
    password: string
  ) => {
    props.submitC( email, pass);
  };



  <Form
          submit={submitC}
          message={""}
        />

Compiler says

is not assignable to type 'IntrinsicAttributes & ((email: string, password: string) => void)'. Property submit does not exist on type 'IntrinsicAttributes & ((email: string, password: string) => void) => void)'.ts(2322)

Answer 1

It looks like you want Form to be a functional component and you are using it below as StudentForm. I’m not sure why these don’t match, but I’ll answer based on that assumption.

Functional components can only have one parameter, typically called props, although it’s also common to destructure the parameters.

The jsx “attibutes” of StudentForm will get assembled into a single object for Form.

But Form has two separate parameters right now, submit, and message.

Try the following (edited to fix typing on complete object):

const Form = ({
    submit,
    message
}:{
    submit: (email: string, password: string) => void,
    message:string
}) =>
{
    return (//omit//)
}

Notice the extra braces that make submit and message destructured from a single object parameter, with the type specified after the complete object.