Only pass through children prop if there are children (withastro#4756)

.changeset/spotty-berries-grow.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+Only pass through children prop if there are children

packages/astro/test/fixtures/react-component/src/components/CloneElement.jsx

@@ -0,0 +1,6 @@
+import { cloneElement } from 'react';
+
+const ClonedWithProps = (element) => (props) =>
+ cloneElement(element, props);
+
+export default ClonedWithProps(<div id="cloned">Cloned With Props</div>);

packages/astro/test/fixtures/react-component/src/pages/index.astro

@@ -6,6 +6,7 @@ import PropsSpread from '../components/PropsSpread.jsx';
 import {Research2} from '../components/Research.jsx';
 import Pure from '../components/Pure.jsx';
 import TypeScriptComponent from '../components/TypeScriptComponent';
+import CloneElement from '../components/CloneElement';
 
 const someProps = {
  text: 'Hello world!',
@@ -29,5 +30,6 @@ const someProps = {
  <Research2 client:idle />
  <TypeScriptComponent client:load />
  <Pure />
+ <CloneElement />
  </body>
 </html>

packages/astro/test/react-component.test.js

@@ -83,6 +83,12 @@ describe('React Components', () => {
  expect($('#client #lazy')).to.have.lengthOf(1);
  expect($('#server #lazy')).to.have.lengthOf(1);
  });
+
+ it('Can pass through props with cloneElement', async () => {
+ const html = await fixture.readFile('/index.html');
+ const $ = cheerioLoad(html);
+ expect($('#cloned').text()).to.equal('Cloned With Props');
+ });
  });
 
  if (isWindows) return;

packages/integrations/react/server.js

@@ -68,8 +68,10 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
  const newProps = {
  ...props,
  ...slots,
- children: children != null ? React.createElement(StaticHtml, { value: children }) : undefined,
  };
+ if(children != null) {
+ newProps.children = React.createElement(StaticHtml, { value: children });
+ }
  const vnode = React.createElement(Component, newProps);
  let html;
  if (metadata && metadata.hydrate) {