[Fix] no-unknown-property: data-* attributes can have numbers

Author: sjarva

CHANGELOG.md

@@ -7,7 +7,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Fixed
 * [`no-unknown-property`]: `onError` and `onLoad` both work on `img` and `script` ([#3388][] @ljharb)
+* [`no-unknown-property`]: data-* attributes can have numbers ([#3390][] @sjarva)
 
+[#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
 
 ## [7.31.5] - 2022.09.03

lib/rules/no-unknown-property.js

@@ -338,14 +338,14 @@ function isValidHTMLTagInJSX(childNode) {
 
 /**
  * Checks if an attribute name is a valid `data-*` attribute:
- * if the name starts with "data-" and has some lowcase (a to z) words, separated but hyphens (-)
+ * if the name starts with "data-" and has some lowcase (a to z) words that can contain numbers, separated but hyphens (-)
  * (which is also called "kebab case" or "dash case"), then the attribute is valid data attribute.
  *
  * @param {String} name - Attribute name to be tested
  * @returns {boolean} Result
  */
 function isValidDataAttribute(name) {
- const dataAttrConvention = /^data(-[a-z]*)*$/;
+ const dataAttrConvention = /^data(-[a-z1-9]*)*$/;
  return !!dataAttrConvention.test(name);
 }
 

tests/lib/rules/no-unknown-property.js

@@ -81,6 +81,7 @@ ruleTester.run('no-unknown-property', rule, {
  { code: '<div data-foo-bar="baz"></div>;' },
  { code: '<div data-parent="parent"></div>;' },
  { code: '<div data-index-number="1234"></div>;' },
+ { code: '<div data-e2e-id="5678"></div>;' },
  // Ignoring should work
  {
  code: '<div class="bar"></div>;',