#Content not displaying when using props.

8 messages · Page 1 of 1 (latest)

viscid coral
#

I'm trying to add author to this code, but it does not display on the view. There is an opening or place where it should be between the appropriate objects but does not display.

<BaseLayout title={title} description={description} image={heroImage}, author={author}, ogType="article">
  <main class="md:flex md:justify-center">
    <article class="prose prose-lg max-w-[750px] prose-img:mx-auto">
      {heroImage && <Image width={750} height={422} format="webp" src={heroImage} alt={title} class="w-full mb-6" />}
      <h1 class="title my-2 text-4xl font-bold">{title}</h1>
      <p class="text-1xl">{author}</p>
      {pubDate && <time>{displayDate}</time>}
      <br />
      {badge && <div class="badge badge-secondary my-1">{badge}</div>}
      {
        tags &&
          tags.map((tag) => (
            <a href={`/blog/tag/${tag}`} class="badge badge-outline ml-2 no-underline">
              {tag}
            </a>
          ))
      }
      {
        updatedDate && (
          <div>
            {" "}
            Last updated on <time>{updatedDate}</time>{" "}
          </div>
        )
      }
      <div class="divider my-2"></div>
      <slot />
    </article>
  </main>
</BaseLayout>
vivid lintelBOT
#

Hi @viscid coral. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the code you've provided, it seems like you're passing author as a prop to the BaseLayout component, and then trying to display it within the same component. However, to access the author prop within the BaseLayout component, you need to use Astro.props.

Here's how you can access the author prop within your BaseLayout component:

---
const { author } = Astro.props;
---
<BaseLayout title={title} description={description} image={heroImage}, author={author}, ogType="article">
  <main class="md:flex md:justify-center">
    <article class="prose prose-lg max-w-[750px] prose-img:mx-auto">
      {heroImage && <Image width={750} height={422} format="webp" src={heroImage} alt={title} class="w-full mb-6" />}
      <h1 class="title my-2 text-4xl font-bold">{title}</h1>
      <p class="text-1xl">{author}</p>
      {pubDate && <time>{displayDate}</time>}
      <br />
      {badge && <div class="badge badge-secondary my-1">{badge}</div>}
      {
        tags &&
          tags.map((tag) => (
            <a href={`/blog/tag/${tag}`} class="badge badge-outline ml-2 no-underline">
              {tag}
            </a>
          ))
      }
      {
        updatedDate && (
          <div>
            {" "}
            Last updated on <time>{updatedDate}</time>{" "}
          </div>
        )
      }
      <div class="divider my-2"></div>
      <slot />
    </article>
  </main>
</BaseLayout>

This code uses Astro.props to access the author prop that you're passing to the BaseLayout component. You can then use {author} to display the author's name within your component.

#

@viscid coral kapa.ai is still learning and improving, please let us know how it did by reacting below

viscid coral
#

@vivid lintel Below is the entire file. You'll notice that author is defined as a prop.

---
import { type BlogSchema } from "../content/config";
import BaseLayout from "./BaseLayout.astro";
import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat";

export interface Props extends BlogSchema {}

const { title, description, author, pubDate, updatedDate, heroImage, badge, tags = [] } = Astro.props;
dayjs.extend(localizedFormat);
const displayDate = dayjs(pubDate).format("ll")
import { Image } from "astro:assets";
---

<BaseLayout title={title} description={description} image={heroImage}, author={author}, ogType="article">
  <main class="md:flex md:justify-center">
    <article class="prose prose-lg max-w-[750px] prose-img:mx-auto">
      {heroImage && <Image width={750} height={422} format="webp" src={heroImage} alt={title} class="w-full mb-6" />}
      <h1 class="title my-2 text-4xl font-bold">{title}</h1>
      <p class="text-1xl">{author}</p>
      {pubDate && <time>{displayDate}</time>}
      <br />
      {badge && <div class="badge badge-secondary my-1">{badge}</div>}
      {
        tags &&
          tags.map((tag) => (
            <a href={`/blog/tag/${tag}`} class="badge badge-outline ml-2 no-underline">
              {tag}
            </a>
          ))
      }
      {
        updatedDate && (
          <div>
            {" "}
            Last updated on <time>{updatedDate}</time>{" "}
          </div>
        )
      }
      <div class="divider my-2"></div>
      <slot />
    </article>
  </main>
</BaseLayout>
vivid lintelBOT
#

Let me check the knowledge base for you. One moment! :books:

#

From the code you've provided, it seems like you're correctly defining author as a prop and trying to display it in your component. If the author is not displaying, it could be due to a few reasons:

  1. The author prop is not being passed to the component. Make sure that when you're using this component, you're passing an author prop to it.

  2. The author prop is being passed, but its value is undefined or an empty string. You can check this by logging the value of author in your component.

  3. There might be a CSS issue that's causing the author's name to be hidden or not visible. Check your CSS to make sure this isn't the case.

If you're still having trouble, you might want to check the Astro documentation (https://docs.astro.build/en/tutorial/4-layouts/1#pass-page-specific-values-as-props) or the Astro GitHub issues (https://github.com/withastro/astro/issues/1792) for similar problems and their solutions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: