CODEWITHSUNDEEP
reactjstypescript
yugakiran
yugakiran

Reputation: 19

typescript error while coverting from js to ts

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;

enter image description here

Any help would be appersiatetd

Upvotes: 0

Views: 130

Answers (1)

Stevie
Stevie

Reputation: 421

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
}

Upvotes: 1

Related Questions