React Show More/ Show less Button switch state

Hi,

I am creating a card using semantic ui. The card is supposed to enable users to view more information and the state is updated to true, and show less information when one clicks show less. For now i have two cards and the show more card never disappears. How can i update the state such that both cards do not appear at the same time? Your assistance will be appreciated.

My code

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

My buttons :

<Card
              className="card"
              style={{ alignItems: 'center', justifyContent: 'center' }}
              onClick={() => setIsActive("true")}
            >
                
              <Card.Content>
              <Image style={{ maxHeight: 250, maxWidth: 250, backgroundColor : 'white'}} src={more} wrapped ui={false} />

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

            {isActive === 'true' &&         
            <Card
                className="card"
                style={{ alignItems: 'center', justifyContent: 'center' }}
                onClick={() => setIsActive("false")}
              >
                  
                <Card.Content>
                <Image style={{ maxHeight: 250, maxWidth: 250, backgroundColor : 'white'}} src={more} wrapped ui={false} />

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

I don’t have time to dig in, and I don’t know if it will solve your problem, but you need to decide what type isActive will be - boolean or string. I vote for boolean.

Your code works just fine for me.

Can you post a link to a live version on something like CodeSandbox or a GitHub repo with the code?

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