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