react typescript what type is setState?

Question

I am passing a setState as a prop from a parent component to modify the state on a child component of that parent, on typescript when creating a interface, what is the type of setState?

function App() {
    const [links, setLinks] = useState();

    return (
        <div className='App'>
            <Sidebar setLinks={setLinks} />
            <Main />
        </div>
    );
}

on child:

interface SidebarProps {
    setLinks: ??????;
}


const Sidebar: React.FC<SidebarProps> = ({ setLinks }) => {
    return (
        <div style={sidebar}>
            <button onClick={() => setLinks('1')}>pic1</button>
            <button onClick={() => setLinks('1')}>pic2</button>
        </div>
    );
};

worth pointing out that in your interface and the App component you've called it setLinks, but in the Sidebar you're using setLink — shamsup
– shamsup, Commented Sep 26, 2020 at 21:59
yeah that was my bad, i didnt double check before send. I set (links: string) => void; but still throwing error: Type 'Dispatch<SetStateAction<undefined>>' is not assignable to type '(links: string) => void'. — nishi
– nishi, Commented Sep 26, 2020 at 22:02
That tells you the type right there, Dispatch<SetStateAction<undefined>>, which Dispatch and SetStateAction can be imported from react — shamsup
– shamsup, Commented Sep 26, 2020 at 22:08

Jammar · Accepted Answer · 2021-03-18 17:52:46Z

7

This is my example based on Kyrill's answer.

interface Props {
  editMode: boolean
  setEditMode: React.Dispatch<React.SetStateAction<boolean>>
}

export default function NavToolbar(props: Props): ReactElement {
 
...

I'm sure there are better ways to do this though :)

answered Mar 18, 2021 at 17:52

Jammar

4865 silver badges16 bronze badges

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

Comments

Sarun UK · Accepted Answer · 2020-09-27 11:16:19Z

3

Refer the below code:-

function App() {
    const [links, setLinks] = useState<string>();

    return (
        <div className='App'>
            <Sidebar setLinks={setLinks} />
            <Main />
        </div>
    );
}


interface SidebarProps {
    setLinks: Function;
}


const Sidebar: React.FC<SidebarProps> = ({ setLinks }) => {
    return (
        <div style={sidebar}>
            <button onClick={() => setLinks('1')}>pic1</button>
            <button onClick={() => setLinks('1')}>pic2</button>
        </div>
    );
};

answered Sep 27, 2020 at 11:16

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

2 Comments

nishi Over a year ago

isnt it more genetic to say it is a function only?

Sarun UK Over a year ago

yeah setLinks is a function.

Kyrill · Accepted Answer · 2020-09-27 06:31:29Z

2

React.Dispatch<React.SetStateAction>

Above string can be replaced if you infer a type for setState (e.g. I assumed setState<string>())

answered Sep 27, 2020 at 6:31

Kyrill

3662 silver badges6 bronze badges

Collectives™ on Stack Overflow

react typescript what type is setState?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related