[7.31.4] `no-unknown-property` throwing on valid props

[diegohaz]

Related to #3380

I'm seeing the following errors in my project:

Unknown property 'onToggle' found

<details> supports onToggle.

Invalid property 'fill' found on tag 'path', but it is only allowed on: svg

<path> supports fill.

Unknown property 'as' found

<link> supports as.

---

Edit: It looks like there are even more valid use cases that this rule is not covering. I'd suggest reverting the changes to the no-unknown-property rule for v7 and releasing it under a new major version. React Known Props can be used to get all the known props, and users can use the ignore option on the rule to add other props like css.

[diegohaz]

Might be worth checking this: https://github.com/tcodes0/react-known-props

cc @tcodes0

[dermoumi]

Same thing for onPointerDown (and probably other pointer events https://reactjs.org/blog/2018/05/23/react-v-16-4.html)

[peter-resmed]

Also having issue with css property of emotion library

[Primajin]

I am also getting this error on defaultChecked

Unknown property defaultChecked found  react/no-unknown-property

In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue or defaultChecked attribute instead of value.

[Meemaw]

Also this should work, but complains that fill is only allowed on svg:

type Props = {
  fill?: string
}

export const Example = ({
  fill,
}: Props) => (
  <svg fill={fill}>
  </svg>
)

[christian98]

I'm having the same problem with fill and <rect/>:

 29:29  error  Invalid property 'fill' found on tag 'rect', but it is only allowed on: svg  react/no-unknown-property

See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect?retiredLocale=de

[ljharb]

@diegohaz Please upgrade to v7.31.4. Are you still seeing these issues?

@Meemaw @christian98 @Primajin @dermoumi a fix for these will be out later today.

@peter-resmed custom attributes that don’t start with data- are invalid - is there an issue filed on emotion for this?

[diegohaz]

@diegohaz Please upgrade to v7.31.4. Are you still seeing these issues?

Yes

[diegohaz]

custom attributes that don’t start with data- are invalid - is there an issue filed on emotion for this?

React does allow custom attributes without data- in certain circumstances. I guess a lot of people would expect the lint rule to work accordingly to that.

[mjchang]

Also getting an issue with the fill attribute on g

[guyellis]

I upgraded to 7.31.4 and I'm still seeing this with playsInline with the video element.

Good news is that 7.31.4 fixed all the other false positives.