What version of astro are you using?

1.0.0-beta.27

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

I have the following, very simple React component:

const TextBlock = ({
  title,
  children,
  noPadding = false,
}) => {
  return (
    <div
      className={`${
        noPadding ? "" : "md:px-2 lg:px-4"
      } flex-1 prose prose-headings:font-grotesk`}
    >
      <h3>{title}</h3>
      <p>{children}</p>
    </div>
  );
};

I am using this component in the following way inside a page.md page:

  <TextBlock title="Eintritt/Hinweise" noPadding>
    <ul class="not-prose">
      <li>Eintritt frei</li>
      <li>Anmeldung erforderlich</li>
      <li>Teilnehmerzahl begrenzt</li>
    </ul>
  </TextBlock>

However, the actual children (which is the <ul> element) are not being rendered correctly inside the {children} variable inside the React component. Instead, they are surrounded with empty <p></p> tags instead of being INSIDE the <p></p> tags. Here is the actual DOM output:

<div class="flex-1 prose prose-headings:font-grotesk">
    <h3>Eintritt/Hinweise</h3>
    <p></p>
    <ul class="not-prose">
      <li>Eintritt frei</li>
      <li>Anmeldung erforderlich</li>
      <li>Teilnehmerzahl begrenzt</li>
    </ul>
    <p></p>
</div>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-b7imzh?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.