From 7ee0732eaa58eb022cf9662c25bad86a26d3b25b Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Sun, 19 Jul 2026 19:55:17 +0000
Subject: [PATCH] fix(coding-conventions): 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..d55749cad264 100644
--- a/static/app/components/structuredEventData/recursiveStructuredData.tsx
+++ b/static/app/components/structuredEventData/recursiveStructuredData.tsx
@@ -37,6 +37,21 @@ function getTotalChildrenFromMeta(m: Record<any, any> | undefined): number | und
   return typeof rootMeta?.len === 'number' ? rootMeta.len : undefined;
 }
 
+function Wrapper({
+  objectKey,
+  children,
+}: {
+  children: React.ReactNode;
+  objectKey: React.ReactNode;
+}) {
+  return (
+    <Fragment>
+      {objectKey}
+      {children}
+    </Fragment>
+  );
+}
+
 export function RecursiveStructuredData({
   config,
   meta,
@@ -57,20 +72,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 objectKey={formattedObjectKey}>
         <ValueNull data-test-id="value-null">
           <AnnotatedValue
             value={nullValue}
@@ -87,7 +93,7 @@ export function RecursiveStructuredData({
     const booleanValue = config?.renderBoolean?.(value) ?? String(value);
 
     return (
-      <Wrapper>
+      <Wrapper objectKey={formattedObjectKey}>
         <ValueBoolean data-test-id="value-boolean">
           <AnnotatedValue
             value={booleanValue}
@@ -102,7 +108,7 @@ export function RecursiveStructuredData({
 
   if (typeof value === 'number' || config?.isNumber?.(value)) {
     return (
-      <Wrapper>
+      <Wrapper objectKey={formattedObjectKey}>
         <ValueNumber data-test-id="value-number">
           <AnnotatedValue
             value={value}
@@ -120,7 +126,7 @@ export function RecursiveStructuredData({
       const stringValue = config.renderString?.(value) ?? value;
 
       return (
-        <Wrapper>
+        <Wrapper objectKey={formattedObjectKey}>
           <ValueString data-test-id="value-string">
             {'"'}
             <AnnotatedValue
@@ -138,7 +144,7 @@ export function RecursiveStructuredData({
 
     if (looksLikeStrippedValue(value)) {
       return (
-        <Wrapper>
+        <Wrapper objectKey={formattedObjectKey}>
           <ValueStrippedString>
             <AnnotatedValue
               value={value}
@@ -153,7 +159,7 @@ export function RecursiveStructuredData({
 
     if (containsCRLF(value)) {
       return (
-        <Wrapper>
+        <Wrapper objectKey={formattedObjectKey}>
           <ValueMultiLineString data-test-id="value-multiline-string">
             <AnnotatedValue
               value={value}
@@ -167,7 +173,7 @@ export function RecursiveStructuredData({
     }
 
     return (
-      <Wrapper>
+      <Wrapper objectKey={formattedObjectKey}>
         <span data-test-id="value-unformatted">
           <AnnotatedValue
             value={value}