Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – TypeScript error when passing useState function as parameter

I am using React and TypeScript and want to pass a useState function into another function named createReferral.

const [isSubmitting, setIsSubmitting] = useState<boolean>(false)

  createReferral: (
    referralData: ReferralFormData,
    referralMasterId: string | null,
    baseRoute: string,
    callbackFunction: () => React.Dispatch<React.SetStateAction<boolean>>,
    propertyDetails?: PropertyDetails,
    successFunction?: () => void,
    failureFunction?: () => void
  ) => { message: { message: string; statusType: string } } | void

When I call my createReferral function I get the following error:

Argument of type '() => void' is not assignable to parameter of type 'string'.

Here is my function call:

      createReferral(
        configuredReferralData,
        referralMasterId,
        baseRoute || '',
        () => setIsSubmitting(false),
        propertyData,
        (successFunction = successFunction),
        (failureFunction = failureFunction)
      )

I am really stuck, not sure why the error is saying I am assigning something to type ‘string’

Alright, I flipped the props around. Now the error message reads:
Type 'void' is not assignable to type 'Dispatch<SetStateAction<boolean>>'

Tags:

2

Answers


  1. 0

    Not sure what you’re trying to achieve by having so many arguments passed into a function but I noticed that you’re not typing the useState setter function correctly and that might be the reason for the error you’re experiencing. The correct type should be:

    callbackFunction: () => React.Dispatch<React.SetStateAction<boolean>>
    Login or Signup to reply.
  2. 0

    You can’t be really stuck. If you want to call your function this way:

    createReferral(
  configuredReferralData,
  referralMasterId,
  () => setIsSubmitting(false),
  baseRoute || '',  // <-- baseRoute parameter
  propertyData,
  successFunction,
  failureFunction
);

    Then your function signature needs be set up accordingly to that:

    createReferral: (
  referralData: ReferralFormData,
  referralMasterId: string | null,
  callbackFunction: () => void,
  baseRoute: string,
  propertyDetails?: PropertyDetails,
  successFunction?: () => void,
  failureFunction?: () => void
) => { message: { message: string; statusType: string } } | void

    Thatswhy typescript tells you to not assign a () => void into the parameter of a string (in your case baseRouter)..

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search