How to pass a setter hook to a child component and satisfy TypeScript

Question

I want to pass a setter hook (setValuesList) from the parent (App.tsx) to the childcomponent (AddNumber.tsx)

I defined the hook in the parent component like this:

const [valuesList, setValuesList] = useState<number[]>([]);

And I want to pass the hook to the childcomponent like this:

<AddNumber valuesList={valuesList} setValuesList={setValuesList} />

However I get a Typescript error:

(JSX attribute) AppProps.setValuesList: (num: number) => void
Type 'Dispatch<SetStateAction<number[]>>' is not assignable to type '(num: number) => void'.
  Types of parameters 'value' and 'num' are incompatible.
    Type 'number' is not assignable to type 'SetStateAction<number[]>'.ts(2322)
AddNumber.tsx(5, 3): The expected type comes from property 'setValuesList' which is declared here on type 'IntrinsicAttributes & AppProps'

In the childcomponent I am defining an interface for the props like this:

interface AppProps {
  valuesList: number[];
  setValuesList: (num: number) => void;
}

Does anyone see what I am doing wrong here?

my repository is at: https://github.com/acandael/number-list

Thanks for your help,

Anthony

Answer 1

This the type definition for useState hook

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

So if you pass the type number[] for the state value when calling useState the type for the setter function will be React.Dispatch<SetStateAction<number[]>>

import { SetStateAction } from 'react';

// this interface will satisfy if you want to pass setValuesList directly
interface AppProps {
  valuesList: number[];
  setValuesList: React.Dispatch<SetStateAction<number[]>>;
 
  // setValuesList: (val: number[]) => void  will also satisfy, but it is
  // better to be explict and pass React.Dispatch<SetStateAction<number[]>>
}

if you don't want to modify the interface you can create and pass another function.

// you don't need to modify the interface if you take this approach -
// the interface already satisfies the type required in this case
const updateValue = (num: number) => {
 setValuesList(prev => prev.concat(num))
}

<AddNumber valuesList={valuesList} setValuesList={updateValue} />