pegasystems / react-sdk-components

The React SDK Components repo is used to create the @pega/react-sdk-components and @pega/react-sdk-overrides npm packages used by the Pega Constellation React SDK. These packages provide the initial set of components used by the React SDK to render DX Components with a design system other than Pega Constellation design system.
https://community.pega.com/marketplace/components/react-sdk
Apache License 2.0
2 stars 4 forks source link

Console error "React keys must be passed directly to JSX without using spread" #389

Open wimbarelds opened 3 days ago

wimbarelds commented 3 days ago

Describe the bug An error that frequently pops into the (chrome) console is:

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, readOnly: ..., type: ..., name: ..., context: ..., getPConnect: ..., additionalProps: ..., validatemessage: ..., children: ...};
  <Connect(Reference2) {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {readOnly: ..., type: ..., name: ..., context: ..., getPConnect: ..., additionalProps: ..., validatemessage: ..., children: ...};
  <Connect(Reference2) key={someKey} {...props} />

To Reproduce Steps to reproduce the behavior:

  1. Go to any page using a reference/View rendered using PConnectComponent (in SDK-Portal?)
  2. See error

Expected behavior No error.

Screenshots

image

Additional context

The error is causes by:

https://github.com/pegasystems/react-sdk-components/blob/master/packages/react-sdk-components/src/bridge/react_pconnect.jsx:284-290

Current code:

    // If the new component is a reference node then mark with a unique key
    if (['reference', 'View'].includes(getPConnect().getComponentName()) && !finalProps.key) {
      finalProps.key = this.getKey();
    }

    // console.log(`react_pconnect: used to return: <this.Control {...finalProps} />`);

    return <this.Control {...finalProps}>{this.createChildren()}</this.Control>;

Code that fixes the error:

    // If the new component is a reference node then mark with a unique key
    if (['reference', 'View'].includes(getPConnect().getComponentName()) && !finalProps.key) {
      return <this.Control {...finalProps} key={this.getKey()}>{this.createChildren()}</this.Control>;
    }

    // console.log(`react_pconnect: used to return: <this.Control {...finalProps} />`);

    return <this.Control {...finalProps}>{this.createChildren()}</this.Control>;
tumms2021389 commented 3 days ago

Thank you, @wimbarelds , for bringing up the issue. We'll investigate it and add a fix for it.