Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Argument of type '(old: number) => void' is not assignable to parameter of type 'number' [duplicate]

I seem to always be fighting TypeScript. Can anyone tell me what I'm doing wrong here?

Argument of type '(old: number) => void' is not assignable to parameter of type 'number'
interface IPagination {
  pageNumber: number;
  setPageNumber: (num: number) => void;
  latestData: unknown;
Pagination.tsx
Updated to show for the Pagination component
const Pagination: React.FC<IPagination> = (props: IPagination) => {
  const { pageNumber, setPageNumber, latestData } = props;
  return (
      <button
        disabled={pageNumber === 1}
        onClick={() => setPageNumber((old: number) => Math.max(old - 1, 1))}
        {strings.PREVIOUS}
      </button>
      <span>{pageNumber}</span>
      <button
        disabled={!latestData || !latestData.next}
        onClick={() =>
          setPageNumber((old) =>
            !latestData || !latestData.next ? old : old + 1
        {strings.NEXT}
      </button>
                Oh MB... the type declaration expect you pass a number to the function. Youre passing a function that returns a number. Can you provide a pagination component snippet?
– Gabriel Alcântara
                Feb 10, 2021 at 13:55
                Did you have the old number in your state? if so you can just do: onClick={() => setPageNumber(Math.max(old - 1, 1))}
– Ar26
                Feb 10, 2021 at 13:58
Assuming setPageNumber is a state-setting function passed in from a useState hook in the parent, the correct type for it is not (num: number) => void, but rather React.Dispatch<React.SetStateAction<number>>, which expands to (value: React.SetStateAction<number>) => void.
React.SetStateAction<number>, in turn, expands to number | ((prevState: number) => number). So the final type for setPageNumber is
(value: number | ((prevState: number) => number)) => void
                Ok, based on this response, it would seem sending state-setting functions is bad practice.  Maybe I'm wrong.  setPageNumber is a useState hook.
– pingeyeg
                Feb 10, 2021 at 15:14
                I never said anything about it being a bad practice. It's a common and reasonable way of controlling parent state from a child. It's only a bad practice if you're passing the function through several layers of components - in that case you'd be better off using a Context. Just make sure to annotate it with the correct type (Dispatch<SetStateAction<number>>) in your prop types.
– Lionel Rowe
                Feb 10, 2021 at 18:41