-
Notifications
You must be signed in to change notification settings - Fork 32
Open
Description
Describe the problem
When using ResponsiveAction components in an array with key props (standard React pattern), the following warning appears in the console:
Warning: ResponsiveAction: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.
Version
@patternfly/react-component-groups: 6.4.0-prerelease.15
To Reproduce
import { ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
const actions = [
<ResponsiveAction
key="action-1"
onClick={() => console.log('Action 1')}
>
Action 1
</ResponsiveAction>,
<ResponsiveAction
key="action-2"
onClick={() => console.log('Action 2')}
>
Action 2
</ResponsiveAction>,
];
return (
<ResponsiveActions>
{actions}
</ResponsiveActions>
);Expected behavior
No warnings should appear. The ResponsiveAction component should not try to access props.key, as React's special key prop is not accessible within components.
Root cause
The ResponsiveAction component appears to be trying to access props.key internally, which React doesn't allow. If the component needs a key-like identifier, it should accept a separate prop (e.g., id or actionKey).
Impact
The functionality works correctly, but the warning pollutes the console and may confuse developers.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status
Needs triage