From 4d9af394a11b1b7f131cc43068cb4c68f98f79b7 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Sun, 19 Jul 2026 19:55:29 +0000
Subject: [PATCH] fix(react): Move Wrapper component to module scope in
 RecursiveStructuredData

---
 .../recursiveStructuredData.tsx               | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/static/app/components/structuredEventData/recursiveStructuredData.tsx b/static/app/components/structuredEventData/recursiveStructuredData.tsx
index 89ae29dcee78..f34e7580b875 100644
--- a/static/app/components/structuredEventData/recursiveStructuredData.tsx
+++ b/static/app/components/structuredEventData/recursiveStructuredData.tsx
@@ -57,20 +57,11 @@ export function RecursiveStructuredData({
       </Fragment>
     );
 
-  function Wrapper({children}: {children: React.ReactNode}) {
-    return (
-      <Fragment>
-        {formattedObjectKey}
-        {children}
-      </Fragment>
-    );
-  }
-
   if (config?.isNull?.(value) || value === null) {
     const nullValue = config?.renderNull?.(value) ?? String(value);
 
     return (
-      <Wrapper>
+      <Wrapper prefix={formattedObjectKey}>
         <ValueNull data-test-id="value-null">
           <AnnotatedValue
             value={nullValue}
@@ -87,7 +78,7 @@ export function RecursiveStructuredData({
     const booleanValue = config?.renderBoolean?.(value) ?? String(value);
 
     return (
-      <Wrapper>
+      <Wrapper prefix={formattedObjectKey}>
         <ValueBoolean data-test-id="value-boolean">
           <AnnotatedValue
             value={booleanValue}
@@ -102,7 +93,7 @@ export function RecursiveStructuredData({
 
   if (typeof value === 'number' || config?.isNumber?.(value)) {
     return (
-      <Wrapper>
+      <Wrapper prefix={formattedObjectKey}>
         <ValueNumber data-test-id="value-number">
           <AnnotatedValue
             value={value}
@@ -120,7 +111,7 @@ export function RecursiveStructuredData({
       const stringValue = config.renderString?.(value) ?? value;
 
       return (
-        <Wrapper>
+        <Wrapper prefix={formattedObjectKey}>
           <ValueString data-test-id="value-string">
             {'"'}
             <AnnotatedValue
@@ -138,7 +129,7 @@ export function RecursiveStructuredData({
 
     if (looksLikeStrippedValue(value)) {
       return (
-        <Wrapper>
+        <Wrapper prefix={formattedObjectKey}>
           <ValueStrippedString>
             <AnnotatedValue
               value={value}
@@ -153,7 +144,7 @@ export function RecursiveStructuredData({
 
     if (containsCRLF(value)) {
       return (
-        <Wrapper>
+        <Wrapper prefix={formattedObjectKey}>
           <ValueMultiLineString data-test-id="value-multiline-string">
             <AnnotatedValue
               value={value}
@@ -167,7 +158,7 @@ export function RecursiveStructuredData({
     }
 
     return (
-      <Wrapper>
+      <Wrapper prefix={formattedObjectKey}>
         <span data-test-id="value-unformatted">
           <AnnotatedValue
             value={value}
@@ -251,6 +242,21 @@ export function RecursiveStructuredData({
   );
 }
 
+function Wrapper({
+  prefix,
+  children,
+}: {
+  children: React.ReactNode;
+  prefix: React.ReactNode;
+}) {
+  return (
+    <Fragment>
+      {prefix}
+      {children}
+    </Fragment>
+  );
+}
+
 const ValueNull = styled('span')`
   font-weight: ${p => p.theme.font.weight.sans.medium};
   color: var(--prism-property);