is not assignable to parameter of type [React]


I have problem in react
I wrote enum type


export enum DivingType {
  FreeDiving = "FreeDiving",
  ScubaDiving = "ScubaDiving",

and my home screen has graphql hooks


import { DivingType } from "..."

export const Home = () => {
  const [divingType, setDivingType] = useState<DivingType>(DivingType.FreeDiving)
  const [pageNumber, setPageNumber] = useState(1)

  useMatchingList(divingType, pageNumber)
  // --------------------[ Return ]--------------------
  return ...


interface IUseMatchingListProps {
  divingType: DivingType
  pageNumber: number
export const useMatchingList: React.FC<IUseMatchingListProps> = ({
}) => {...}

and I have

Argument of type 'import("...").DivingType' is not assignable to parameter of type 'PropsWithChildren<IUseMatchingListProps>'

useMatchingList(divingType, pageNumber)
       |            ^

what is the matter ?
please help me !


The FC in React.FC means "Functional Component". And a hook is not a component. A custom hook is just a function that calls other hooks. So it takes arguments just like any function would.

That means your hooks should look more like this:

export const useMatchingList = (divingType: DivingType, pageNumber: number) => {
  // my hook implementation

Working typesafe example

Answered By – Alex Wayne

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published