Chakra UI: Make HStack disappear with condition

Question

I have 2 card that have same properties but has some different props, card 1 (amountBed, amountBath, area), card 2 (area). This's my code:

<HStack spacing={"25px"}>
    <HStack spacing={"12px"}>
        <BedroomIcon />
        <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
            {amountBed}
        </Text>
    </HStack>
    <HStack spacing={"12px"}>
        <BathroomIcon />
        <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
            {amountBath}
        </Text>
    </HStack>
    <HStack spacing={"12px"}>
        <AreaIcon />
        <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
            {area} m<sup>2</sup>
        </Text>
    </HStack>
</HStack>

I want to disappear bedroom and bathroom HStack if the amountBed, amountBath equal 0 or null.

Answer 1

you can use logical AND operater, then this should hide bedroom and bathroom when their values are FALSY.

 <HStack spacing={"25px"}>
    {amountBed && 
        <HStack spacing={"12px"}>
            <BedroomIcon />
            <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
                {amountBed}
            </Text>
        </HStack>}
       {amountBath && <HStack spacing={"12px"}>
            <BathroomIcon />
            <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
                {amountBath}
            </Text>
        </HStack>}
        <HStack spacing={"12px"}>
            <AreaIcon />
            <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}>
                {area} m<sup>2</sup>
            </Text>
        </HStack>
    </HStack>