jsx-key: does not support spread attributes

[wmertens]

If you do <SomeEl {...{key: 123}}/>, react/jsx-key will falsely alert.

[TrevorSayre]

This is especially problematic if you're using Downshift

(Simplified example)

<Downshift>
  {({ getItemProps, isOpen }) => (
    <ul>
      {isOpen
        ? items.map((item, index) => (
            <li
              {...getItemProps({
                key: item.value,
                index,
                item,
              })}
            >
              {item.value}
            </li>
          ))
        : null
      }
    </ul>
  )}
</Downshift>

You would either disable the rule specifically for this, or you would have to rewrite as:

<Downshift>
  {({ getItemProps, isOpen }) => (
    <ul>
      {isOpen
        ? items.map((item, index) => {
            const props = getItemProps({
              key: item.value,
              index,
              item,
            });

            return (
              <li
                key={props.key}
                {...props}
              >
                {item.value}
              </li>
            )
          })
        : null
      }
    </ul>
  )}
</Downshift>

This feels very clunky.

[EECOLOR]

There is an rfc that states: "Deprecate spreading key from objects."

#1753
reactjs/rfcs#107

[ljharb]

Indeed; key and ref should both always be explicit.

Closing this as won’t fix.

[EECOLOR]

@ljharb The RFC seems to hint that ref is not restricted and will become a regular prop.

[ljharb]

interesting. either way, key won’t be a normal one :-)

[mrchantey]

Are there any good resources out there for understanding why its important to not spread key? The react docs explain the issues with spread in general, but not why keys are different.

[ljharb]

Because key is a special prop for React only that components can’t ever receive.

[mrchantey]

Thank you! that totally makes sense now.