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?

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?

• javascript
• reactjs
• typescript
• react-hooks

• 1 setCollapseUpper is a function not a value – Code Maniac Commented Jun 17, 2020 at 4:39
• You need to invoke it setCollapseUpper(!collapseUpper) – Code Maniac Commented Jun 17, 2020 at 4:40
• Read here reactjs/docs/hooks-reference.html#usestate – Code Maniac Commented Jun 17, 2020 at 4:41

2 Answers 2

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);
};

you need to change the value of collapseUpper not setCollapseUpper:

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

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