Using exported functions in React typescript

Question

i have 2 questions. How should i use exported functions and how can i use optional arguments?

I created a component just for functions and i want to call it by importing them to other components.

I'm exporting this function as:

    export const verifyOTP = (
      inputId: string,
      setIsVer: (state: boolean) => void | null,
      setProfile: () => void | null,
      setIsAuth: (state: boolean) => void
    ) => {
      let codeInput = document.getElementById(inputId) as HTMLInputElement;
      if (codeInput.value.length === 6) {
        let confirmationRes = window.confirmationRes;

    confirmationRes
      .confirm(codeInput.value)
      .then((res: any) => {
        setIsVer(true);
        setProfile();
        setIsAuth(true);
      })
      .catch((error: ErrorCallback) => console.log(error));
  }
};

And i'm calling it in an input as:

<input
              type="text"
              id="code"
              onChange={() => verifyOTP('code', null, null, setIsAuth)}
              placeholder="Código"
              disabled={disable}
            ></input>

In this component i just want it to trigger setIsAuth. But in another component i want to use all the 4 arguments.

It's throwing this error at the onChange:

Argument of type 'null' is not assignable to parameter of type '(state: boolean) => void | null'.

k.tten · Accepted Answer · 2022-05-31 22:30:50Z

3

It's all about operator precedence:

(state: boolean) => void | null is actually a function that can either return void or null.

You want ((state: boolean) => void) | null instead, which is a function that returns void, or just the value null.

answered May 31, 2022 at 22:30

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

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

2 Comments

José Carlos Over a year ago

Thanks. Now it says 'Cannot invoke object that's possibly null', so i tried setIsVer && setIsVer(true); and apparently it's working. Is there another better/smarter way to do it?

k.tten Over a year ago

@JoséCarlos Yes, you can optionally call an expression if it is not null or undefined with setIsVer?.(true). Looks wild, but it's to match optional chaining (foo?.bar).

Collectives™ on Stack Overflow

Using exported functions in React typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related