React Semantic UI Same Button To Show More/Less

[shiro1]

Hi,
I have a button that i am using to show more categories and show less categories. When a user clicks show more, the button state should switch and the button text should show less. When a user clicks show less, extra categories should be hidden and the button text should read more. The text updates fine, but i am having a hard time figuring out why the extra categories do not hide when i click show less. Any advise will be highly appreciated.

My state :

  const [isActive, setIsActive] = useState(false);

My button and the extra components that should hide

<Card
                className="card"
                style={{ alignItems: "center", justifyContent: "center" }}
                onClick={() => setIsActive(true)}
              >
                {isActive === true ? (

                  <Card.Content>
                  <Image
                    style={{
                      maxHeight: 200,
                      maxWidth: 200,
                      backgroundColor: "white"
                    }}
                    src={more}
                    wrapped
                    ui={false}
                   />

                    <Card.Header style={{ textAlign: "center" }}>
                      Less Categories
                    </Card.Header>
                  </Card.Content>
                ) : (
                    <Card.Content>
                    <Image
                      style={{
                        maxHeight: 200,
                        maxWidth: 200,
                        backgroundColor: "white"
                      }}
                      src={more}
                      wrapped
                      ui={false}
                    />

                    <Card.Header style={{ textAlign: "center" }}>
                      More Categories
                    </Card.Header>
                 </Card.Content> 
                  
                )}
                
              </Card>

       {isActive === true && (
            <div
              xs={12}
              sm={12}
              md={12}
              lg={12}
              style={{ display: "flex", flexWrap: "wrap" }}
            >
              {categories !== ""
                ? categories.map((data, index) => {
                    let images = data.image;

                    if (data.main === "0") {
                      return (
                        <div className={classes.cardSection}>
                          <Card
                            className="card"
                            onClick={() => {
                              handleCat(data, data.id);
                            }}
                          >
                            <Card.Content>
                              <Card.Header>
                                &nbsp;&nbsp;&nbsp;{data.name}
                              </Card.Header>
                            </Card.Content>
                          </Card>
                        </div>
                      );
                    }
                  })
                : null}
            </div>
          )}

[lasjorg]

Are you saying the last container div is always visible, does it not start out as hidden?

We might need to see more of the code (GitHub) or a live example on something like CodeSandbox.

---

BTW, is there a reason why you set the state using a Boolean value but then switch to a string?

If you want to toggle the state, using a Boolean would be simpler as you can just negate (!) the current state. Then you can also just do isActive && (<JSX>)

Example

import React from "react";

export default function App() {
  const [isActive, setIsActive] = React.useState(false);
  return (
    <div className="App">
      <button onClick={() => setIsActive((state) => !state)}>Toggle</button>
      {isActive && (
        <div>
          <h1>Some Content</h1>
        </div>
      )}
    </div>
  );
}

[shiro1]

When i click the more button, it works well, the extra categories are visible. When i click the less button, nothing happens.

[lasjorg]

Not sure what the less button is?

You only have one call to setIsActive and it just sets the state to the string "true". As far as I can see you have no toggle state.

Edit:

You edited your code in the first post. Now you are using a Boolean. Which is it?

If you are using a Boolean, just negate the state. That way when you click the button it will always just set the state to the opposite of what it is.