How to toggle boolean state in React and TypeScript?

Question

I am new to React and TypeScript.

I want to toggle a boolean state (true/false) with a handler function. I've read other posts about how to do this in ES6 but I am unclear of how to achieve this in TypeScript.

So far I have:

  const MyComponent = () => {
    const [collapseUpper, setCollapseUpper] = React.useState(true);

    const handleCollapse = () => {
      collapseUpper = !setCollapseUpper;
    };

    return (
       <Link onClick={handleCollapse}>More</Link>
       <Collapse in={collapseUpper}>
         //content

But I cannot get it to work.

Can anyone point me in the right direction?

setCollapseUpper is a function not a value

Code Maniac
– Code Maniac

2020-06-17 04:39:48 +00:00
Commented Jun 17, 2020 at 4:39 — Code Maniac
– Code Maniac, Commented Jun 17, 2020 at 4:39
You need to invoke it setCollapseUpper(!collapseUpper)

Code Maniac
– Code Maniac

2020-06-17 04:40:54 +00:00
Commented Jun 17, 2020 at 4:40 — Code Maniac
– Code Maniac, Commented Jun 17, 2020 at 4:40
Read here reactjs.org/docs/hooks-reference.html#usestate

Code Maniac
– Code Maniac

2020-06-17 04:41:16 +00:00
Commented Jun 17, 2020 at 4:41 — Code Maniac
– Code Maniac, Commented Jun 17, 2020 at 4:41

wentjun · Accepted Answer · 2020-06-17 04:41:01Z

6

This is how it should be done:

const handleCollapse = () => {
  setCollapseUpper(!collapseUpper);
};

You will need to call the setCollapseUpper to handle any updates in state.

Better still, you can use the callback function to update the state:

const handleCollapse = () => {
  setCollapseUpper((prevState) => !prevState);
};

answered Jun 17, 2020 at 4:41

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

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

Comments

Bhuwan Chandra · Accepted Answer · 2022-04-24 14:19:20Z

1

you need to change the value of collapseUpper not setCollapseUpper:

const [collapseUpper, setCollapseUpper] = React.useState(true);

const handleCollapse = () => {
  setCollapseUpper(!collapseUpper);
};

edited Apr 24, 2022 at 14:19

answered Jun 17, 2020 at 4:41

Bhuwan Chandra

3151 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to toggle boolean state in React and TypeScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related