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>