Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react/jsx-key is triggering false positive for props defined as an object properties

See original GitHub issue

Sometimes it is useful to define a component call as

<Component {...{ key: id, id, shortTitle }} />

instead of

<Component key={id} id={id} shortTitle={shortTitle} />

but in the first case ESLint gets mad about the missing key prop, triggering the react/jsx-key rule.

This is the reason why I’m turning this rule off for now. I believe this should be fixed.

Issue Analytics

State:
Created 5 years ago
Comments:16 (9 by maintainers)

Top GitHub Comments

3reactions

ljharbcommented, Sep 24, 2019

https://github.com/reactjs/rfcs/pull/107

2reactions

machineghostcommented, Jun 6, 2020

Can we take a step back here? We have a request for a change to React, which may never happen … and because of that ESLint refuses to even provide the option to mark 100% valid code (today) as valid?

How does this make sense?

Top Results From Across the Web

false positive in prop-types validation - reactjs - Stack Overflow

It accesses props.url and has no propTypes . However, I think this is a bug because the plugin should realize that props are...

Object.defineProperties() - JavaScript - MDN Web Docs - Mozilla

The Object.defineProperties() method defines new or modifies existing properties directly on an object, returning the object.

How passing props to component works in React

Master how to pass props (properties) to components in React with this useful beginner's guide, including demo code.

Data Structures: Objects and Arrays - Eloquent JavaScript

Comparing different objects will return false , even if they have identical properties. There is no “deep” comparison operation built into JavaScript, ...

3 Ways to Check If an Object Has a Property in JavaScript

hasOwnProperty('realName ') returns false — denoting a missing property. ... The own properties are those defined directly upon the object.