ResponsiveAction: Warning about accessing 'key' prop

[rhamilto]

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.

---

Jira Issue: PF-3829

[github-actions]

🎉 This issue has been resolved in version 6.4.0-prerelease.16 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀