Passing useState as props in typescript

Question

Say I have a parent component with two child components:

const Parent = () => {
   const [myVar, setmyVar] = useState(false)

   return (
     <>
       <MyChildComponent1 myVar={myVar} setMyVar={setMyVar} \> 
       <MyChildComponent2 myVar={myVar} \>
     </>
   )
}

Now how would I go about setting the type correctly in MyChildComponent2?

This is what I've come up with so far:

const MyChildComponent1 = (
  {myVar, setMyVar}: 
  {myVar: boolean, setMyVar: (value: boolean) => void}) = (...)

Is the type for setMyvar correct? Or should it be something else?

Clearer answer https://stackoverflow.com/questions/59261671/how-do-i-change-props-from-a-child-component-using-hooks/ — tim, Oct 19 '20 at 14:40

ljbc1994 · Accepted Answer · 2020-10-28T12:01:22.097

87

The type that would match the function returned from invoking useState would be:

setMyVar: (value: boolean | ((prevVar: boolean) => boolean)) => void;

If we look at the type definition file from DefinitelyTyped [1], we can see that the second type in the return type is a dispatch:

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

Thus the generic type provided is passed through to SetStateAction<S>, which is defined as:

type SetStateAction<S> = S | ((prevState: S) => S);

So essentially, an interface for your component would be the following:

interface IProps {
  myVar: boolean;
  setMyVar?: (value: boolean | (prevVar: boolean) => boolean) => void;
}

As @Retsam said, it's best to use React's exported types:

import { Dispatch, SetStateAction } from "react";

interface IProps {
  myVar: boolean;
  setMyVar?: Dispatch<SetStateAction<boolean>>;
}

References: [1] https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L845

edited Oct 28 '20 at 12:01

answered May 07 '19 at 19:02

ljbc1994

2,044
11
13

12

They can import the `Dispatch` and `SetStateAction~~` types from React, so their types could be `{myVar: boolean, setMyVar?: Dispatch>}`~~ – Retsam May 07 '19 at 19:06
1

@Retsam, consoder writing this as an answer instead of a comment. I'm new to typescript and react and hooks -- too much moving parts at the same time. Any drawbacks to this approach? – Ami Heines Sep 05 '19 at 09:00
yes, thank you @Retsam... TS stopped screaming at me and removed 10 warnings – Oct 27 '20 at 12:14
This is gold! Thank you – Diego Feder Dec 01 '20 at 02:55
What about making it even shorter? `{myVar: boolean, setMyVar?: Dispatch}` – TechWisdom Dec 31 '20 at 02:37
1

I love the thorough explanation here. Bravo! – Starfs Jan 30 '23 at 18:57

cisco · Answer 2 · 2020-09-17T04:53:23.377

27

Dispatch & SetStateAction types

As @Retsam mentioned, you can also import and use the types Dispatch and SetStateAction from React:

import React, { Dispatch, SetStateAction } from 'react';

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<boolean>>
) => {...};

Bonus

When I find myself frequently using this, I create a type alias to help with readability

import React, { Dispatch, SetStateAction } from 'react';

type Dispatcher<S> = Dispatch<SetStateAction<S>>;

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatcher<boolean>,
) => {...};

hope this helps.

edited Sep 17 '20 at 04:53

answered May 17 '20 at 18:48

cisco

802
9
12

Very cool answer, I like this implementation – Chris Perry Mar 25 '22 at 22:48
Very clean code and I have implemented it in my app. – Zahari Kitanov Jun 21 '22 at 20:15

score 5 · Answer 3 · answered Sep 16 '20 at 23:48

5

Adding onto @fiz's comment, his code of block was slightly not working for me:

import React, { Dispatch, SetStateAction } from 'react';

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<<boolean>>
) => {...};

I had to set setMyVar: Dispatch<SetStateAction<boolean>> (there was one too many brackets)

answered Sep 16 '20 at 23:48

Alex Pham

51
1
2

2

Thanks for correcting the syntax error. Btw, you can edit the answer next time for small errors like this or other marginal improvements, instead of creating an entire other post. Welcome to the community! – cisco Sep 17 '20 at 04:58

score 4 · Answer 4 · answered Jan 21 '22 at 10:14

It can also be done like this using Interface and React components.

MainComponent.tsx

Value assignment of the useState component defined in Main is done in the child component. When this field is triggered, the code in useEffect will run.

import React, { useEffect } from 'react';
import Login from './views/Login/index';

const App: React.FunctionComponent = () => {
    const [isAuthenticated, setAuthenticatedStatus] = React.useState(false);

    useEffect(() => {
        if (isAuthenticated)
            window.location.href = "<redirect url>";
    }, [isAuthenticated]);

    return (<Login setLoginStatus={setAuthenticatedStatus} />)
};

export default App;

ChildComponent.tsx

import { Dispatch, SetStateAction, FunctionComponent } from 'react';
import authService from '../../apiServices/authService';

interface IProps {
   setLoginStatus: Dispatch<SetStateAction<boolean>>;
}

const Login: FunctionComponent<IProps> = (props: IProps) => {

   const login = async (username: string, password: string) => {
      const response = await authService.authenticateUser(username, password);

      if (response && response.statusCode == 200 && response.result.accessToken) {
         props.setLoginStatus(true);
      }
      else {
         // ...
      }
   };


   return (
      <>
         ...
      </>
   );
};

export default Login;

score 2 · Answer 5 · edited Nov 17 '22 at 15:30

I found the other answers slightly confusing, so here's what worked for me:

Instantiate useState() in parent.ts:

const [someState, setSomeState] = useState<stateType>(initialState)

Pass in setSomeState() to child.ts:

<Child
    setSomeState={setSomeState}
/>

Make sure to only pass the name without the ()

In child.ts set Props like so:

import Dispatch from 'react'

interface Props {setSomeState: Dispatch<stateType>}

score 0 · Answer 6 · answered Aug 31 '22 at 18:30

0

MyChildComponent1.tsx
set type Props like this:

import React from 'react'

type Props = {
myVar:boolean;
setmyVar: React.Dispatch<React.SetStateAction<boolean>>;
}
const MyChildComponent = ({myVar, setmyVar}: Props) => {

... YOUR CODE ...

}

answered Aug 31 '22 at 18:30

Tppknightz

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 06 '22 at 07:26

score 0 · Answer 7 · answered Jul 20 '23 at 15:43

Expanding on my answer on another question. which obtains the useState return type, the child component prop types can just be declared as the first and second items of this ReturnType

type UseStateHook = ReturnType<typeof useState<boolean>>

const MyChildComponent1 = (
    myVar: UseStateHook[0]
    setMyVar: UseStateHook[1]
) => {...};

Passing useState as props in typescript

7 Answers7

Dispatch & SetStateAction types

Bonus

Linked

Related