es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Chakra UI: Hacer que HStack desaparezca con una condición

04 Aug, 2023 Programació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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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á.

    { amountBed || amountBath ? (
  <hstack spacing="{"25px"}">
    { amountBed ? (
      <hstack spacing="{"12px"}">
          <bedroomicon></bedroomicon>
          <text color="{"black.400"}" fontweight="{"bold"}" fontsize="{"16px"}">
              {amountBed}
          </text>
      </hstack>
    ): null }
    { amountBath ? (
      <hstack spacing="{"12px"}">
          <bathroomicon></bathroomicon>
          <text color="{"black.400"}" fontweight="{"bold"}" fontsize="{"16px"}">
              {amountBath}
          </text>
      </hstack>
    ): null }
    <hstack spacing="{"12px"}">
        <areaicon></areaicon>
        <text color="{"black.400"}" fontweight="{"bold"}" fontsize="{"16px"}">
            {area} m<sup>2</sup>
        </text>
    </hstack>
  </hstack>
) : null }

Comments are closed.