React Semantic UI Same Button To Show More/Less

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

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

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

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.