issue with passing hook to child typescript

Question

I have a react component using hooks. My parent component looks like this:

const Parent = () => {     const [isActive, setIsActive] = useState(false);     return (      <Child isActive={isActive} setIsActive={setIsActive} />    ); } 

and here is the child component

type Props = {    isActive: boolean;    setIsActive: () => void; } const Child = ({ isActive, setIsActive}: Props) {    // component }  

the error I am seeing is

Type error: Type 'Dispatch < SetStateAction>' is not assignable to > type '() => void'. TS2322

Answer 1

Your Props type for Child is incorrect. React types the setIsActive as Dispatch, which is defined as:

type Dispatch<A> = (value: A) => void; 

You're missing the value argument from your type. This should be correct (also note that it needs to be a colon not an equal sign):

type Props = {    isActive: boolean;    setIsActive: (active: boolean) => void; } const Child = ({ isActive, setIsActive}: Props) {    // rest of the component }