From 20ca3154fb37049cbcd51b06d9fa2ef25ac25a36 Mon Sep 17 00:00:00 2001 From: StandardGage <50509562+StandardGage@users.noreply.github.com> Date: Wed, 7 Feb 2024 13:08:44 -0500 Subject: [PATCH] Fix Issues with passing void elements to React with `experimentalReactChildren` flag set (#9849) * Create simple react element if element has no children * Fix for when element has text * add changeset * minor -> patch --------- Co-authored-by: Arsh <69170106+lilnasy@users.noreply.github.com> Co-authored-by: Nate Moore --- .changeset/metal-penguins-drum.md | 5 +++++ packages/integrations/react/client.js | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/metal-penguins-drum.md diff --git a/.changeset/metal-penguins-drum.md b/.changeset/metal-penguins-drum.md new file mode 100644 index 000000000000..cd740f6e558c --- /dev/null +++ b/.changeset/metal-penguins-drum.md @@ -0,0 +1,5 @@ +--- +"@astrojs/react": patch +--- + +Fixes an issue where passing void elements (img, etc..) did not work with the `experimentalReactChildren` option enabled diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js index cef488c83bc4..90e4ceb837b5 100644 --- a/packages/integrations/react/client.js +++ b/packages/integrations/react/client.js @@ -15,6 +15,10 @@ function createReactElementFromDOMElement(element) { for (const attr of element.attributes) { attrs[attr.name] = attr.value; } + // If the element has no children, we can create a simple React element + if (element.firstChild === null) { + return createElement(element.localName, attrs); + } return createElement( element.localName,