Skip to content

ResponsiveAction: Warning about accessing 'key' prop #890

@rhamilto

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions