Skip to content

Commit 3f34a81

Browse files
sadpandajoeclaude
andcommitted
refactor(explore): remove duplicate React keys in ViewQueryModal
Addresses PR feedback: - Remove redundant keys from Alert and ViewQuery components (Fragment already has key) - Improve Fragment key to use content-based identifiers (query/error content) instead of array index This follows React best practices by: 1. Avoiding duplicate keys on conditionally rendered children 2. Using stable, content-based keys instead of index-based keys 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 2f41fce commit 3f34a81

1 file changed

Lines changed: 18 additions & 20 deletions

File tree

superset-frontend/src/explore/components/controls/ViewQueryModal.tsx

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -89,26 +89,24 @@ const ViewQueryModal: FC<Props> = ({ latestQueryFormData }) => {
8989

9090
return (
9191
<ViewQueryModalContainer>
92-
{result.map((item, index) => (
93-
<Fragment key={index}>
94-
{item.error && (
95-
<Alert
96-
key={`error-${index}`}
97-
type="error"
98-
message={item.error}
99-
closable={false}
100-
/>
101-
)}
102-
{item.query && (
103-
<ViewQuery
104-
key={`query-${index}`}
105-
datasource={latestQueryFormData.datasource}
106-
sql={item.query}
107-
language={item.language}
108-
/>
109-
)}
110-
</Fragment>
111-
))}
92+
{result.map((item, index) => {
93+
// Use content-based key when available, fall back to index
94+
const key = item.query || item.error || `result-${index}`;
95+
return (
96+
<Fragment key={key}>
97+
{item.error && (
98+
<Alert type="error" message={item.error} closable={false} />
99+
)}
100+
{item.query && (
101+
<ViewQuery
102+
datasource={latestQueryFormData.datasource}
103+
sql={item.query}
104+
language={item.language}
105+
/>
106+
)}
107+
</Fragment>
108+
);
109+
})}
112110
</ViewQueryModalContainer>
113111
);
114112
};

0 commit comments

Comments
 (0)