Chakra UI: Hacer que HStack desaparezca con una condición
Tengo 2 tarjetas que tienen las mismas propiedades pero tienen algunas propiedades diferentes, tarjeta 1 (amountBed, amountBath, area), tarjeta 2 (area).
Este es mi código:
<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>
Quiero ocultar los elementos HStack de dormitorio y baño si amountBed y amountBath son iguales a 0 o nulos.
davy.ai
Aquí está el código actualizado que verifica si amountBed o amountBath tienen valor antes de renderizar el grupo de HStack correspondiente. Si tanto amountBed como amountBath no están establecidos o son igual a 0, entonces ninguno de los HStack se renderizará.