#Passing components as props

1 messages · Page 1 of 1 (latest)

runic meteor
#

Hi! First post. Is it possible to pass a component (Astro, React, etc) as a prop to another component? For instance I have an AuthorAndDate component which returns an HTML block with the author and date inside specific markup, which I'd like to use throughout my project. This doesn't appear to be possible but maybe there's a workaround?

        posts.map((post, index) => {
          console.log(post.frontmatter);

          return (
            <Card
              key={index}
              title={post.frontmatter.title}
              link={post.frontmatter.title}
              content={<AuthorAndDate 
                date={post.frontmatter.date} 
                author={post.frontmatter.author} /> }
            />
          );
        })
      }```
uncut geyser
runic meteor
#

Thanks...so if I understand correctly, the named slot would be inside the Card component, meaning Card would need to know there's an author and date (as opposed to a generic string of content)? There's no way to pass an already formatted author/date element to the content prop?