typescript error while coverting from js to ts

Question

I am trying to convert js to ts and I am having following error

Type '(props: PropsWithChildren) => (any[] | ((e: any) => void))[]' is not assignable to type 'FC'. Type '(any[] | ((e: any) => void))[]' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2322)

Here is the JS Code

    import { useState } from "react";
export const useForm = initialValues => {
  const [values, setValues] = useState(initialValues);
  return [
    values,
    e => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    }
  ];
};

Here is my ts code

    import React, { useState } from "react";
export interface Props {
  initialValues: any[];
}
const useForm: React.FC<Props> = (props) => {
  const [values, setValues] = useState(props.initialValues);
  return [
    values,
    (e: any) => {
      setValues({
        ...values,
        [e.target.name]: e.target.value,
      });
    },
  ];
};
export default useForm;

Any help would be appersiatetd

Stevie · Accepted Answer · 2021-04-06 19:00:18Z

1

you've created a new hook useForm, it's not a functional component so you can't declare its type to be React.FC, you need to define its' parameters and return type. It's something like:

const useForm = (initialValues: any[]): [any[], (value: any) => void] => {
    ...useForm function content
}

you can of course extract the types of the function outside, like this:

type UseForm = (initialValues: any[]) => [any[], (value: any) => void];
const useForm: UseForm => {
    ...useForm function content
}

answered Apr 6, 2021 at 19:00

Stevie

4213 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yugakiran Over a year ago

Thank you! This worked. I did not knew new custom hook in tS cannot be React.FC.

Collectives™ on Stack Overflow

typescript error while coverting from js to ts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related