My personal blog

Just another WordPress site

Usage of props in Astro components

On

By

Fernando

In

Creamos un componente HIJO (llamado CardLaunch.astro por ejemplo) y en el encabezado indicamos las propiedades (props) que vamos a pasarle la componente padre:
Ya que estamos utilizando Typescript es muy facil definir los tipos de datos de cada una sin necesidad de usar una libreria .
Para evitar colocar el prefijo al querer acceder a cada prop (como por ejemplo Astro.props.flightNumber) usamos desestructuracion para poder acceder las propiedades de una manera mas limpia:

--------
interface Props {
    id: string
    details: string
    img: string
    success: boolean
    flightNumber: number
}
const {success, flightNumber, img, id, details } = Astro.props
const successText = success ? "Exito" : "Fracaso"
--------

En el cuerpo mostramos las props :

<a href={`/launch/${id}`}
   class="rounded-lg border shadow-md bg-gray-800 border-gray-700 hover:scale-105 hover:bg-gray-700 hover:border-gray-500 transition flex flex-col"
>
    <picture class="flex justify-center p-4">
        <img class="mb-5 rounded-lg" src={img} alt={`Patch for launch ${id}`} />
    </picture>

<header class="p-4 flex-grow">
    <span class='text-xs font-semibold mr-2 px-2.5 py-0.5 rounded'>Por hacer</span>
</header>

<h2 class="my-2 text-2xl font-bold tracking-tight text-white">
    Flight #{flightNumber}
</h2>

<p class="mb-4 font-light text-gray-400">
    {details?.length > 100 ? details.slice(0, 100) + "..." : details}
</p>
</a>

En el componente PADRE (llamado Launches.astro por ejemplo) procedemos a importarlo:

import CardLaunch from "./CardLaunch.astro";

En este ejemplo, para pasarle los valores vamos a recorrer un objeto JSON y sus propiedades se las pasamos al componente HIJO, que a su vez las mostrara en el padre:

const { docs : launches  } = (await res.json()) as ApiSpaceXResponse;
---
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {
            launches.map((launch) => (
                    <CardLaunch
                            id={launch.id}
                            img={launch.links.patch.small}
                            details={launch.details}
                            flightNumber={launch.flight_number}
                            success={launch.success}
                    />
            ))
        }
</div>

Ahora vamos a mejorar el codigo y para evitar tener que colocar el prefijo launch, vamos a extraer los valores que necesitamos del objeto y los utilizamos de manera mas directa. Ademas, en vez de utilizar la propiedad flight_number la vamos a renombrar a flightNumber para que sea mas facil de leer:

<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {
            launches.map(
                ({id, links, details, flight_number : flightNumber, success}) => (
                    <CardLaunch
                            id={id}
                            img={links.patch.small}
                            details={details}
                            flightNumber={flightNumber}
                            success={success}
                    />
            ))
        }
</div>

11 responses to “Usage of props in Astro components”

Categories

Archives

Tags