I would like to make a form component. what is an IntrinsicAttributes?

Question

I would like to make a form component that includes function argument. I tried to take function of props to compont. but An error below happened . How can I solve this error?

TypeScript error. Type '{ submit: (user: string) => void is not assignable to type 'IntrinsicAttributes Property 'submit' does not exist on type IntrinsicAttributes & ((user: string,) => void).

However , submit is exist on form componet!


const UserForm = (
  submit: (user: string) => void,
  name: string,
) => {
  const handleChange = (name: string) => (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setState({ ...state, [name]: event.target.checked });
  };
  const [state, setState] = React.useState({
    isActive: false,
  });

  return (
    <React.Fragment>
      <TextField id="name" />
      <FormGroup row>
        <FormLabel component="legend">Student Type</FormLabel>
        <FormControlLabel
          control={
            <Checkbox
              checked={state.isActive}
              onChange={handleChange("isActive")}
              value="isActive"
            />
          label="Active"
        />
      </FormGroup>
      <Button
        color="primary"
        onClick={() => {
            submit(user);
            //window.alert("confirm weather the name is correct.");
        }}
      >
        Submit
      </Button>
    </React.Fragment>
  );
};


      {kind === "john" && (
        <UserForm
          submit={props.submitUser}
          name={""}
        />
      )}


export type nProps =
  | {
      userType: "john";
      submitUser: (
        user: string
      ) => void;
    }
  |

Drew Reese Drew Reese · Accepted Answer · 2020-01-28T08:43:49

If you're trying to create a react functional component then your function signature is malformed. React components take a single props parameter.

const UserForm = ({
  submit: (user: string) => void,
  name: string,
}) => { ... }

Notice the curly brackets surrounding them

If the object destructuring looks a little confusing, consider this equivalent code

const UserForm = props => {
  const { submit, name } = props; // propTypes/shape defined externally
  ...
}

I would like to make a form component. what is an IntrinsicAttributes?

1 Answers