Eslint-plugin-react: `TypeError: currentPropName.toLowerCase is not a function` in sort-prop-types

[dfdeagle47]

The rule sort-prop-types (with ignoreCase: true) will produce this error when using PropTypes.shape with a number as a key.

Here's an example to reproduce this issue

import React from 'react';
import PropTypes from 'prop-types';

export default function Component({ numberToNameMap }) {
  return <div>{numberToNameMap[0]}</div>;
}

Component.propTypes = {
  numberToNameMap: PropTypes.shape({
    0: PropTypes.string.isRequired,
  }).isRequired,
};

The error occurs at this line https://github.com/yannickcr/eslint-plugin-react/blob/v7.12.4/lib/rules/sort-prop-types.js#L192.

Using a string instead of the number as the key when defining the propTypes avoid this issue

import React from 'react';
import PropTypes from 'prop-types';

export default function Component({ numberToNameMap }) {
  return <div>{numberToNameMap[0]}</div>;
}

Component.propTypes = {
  numberToNameMap: PropTypes.shape({
    '0': PropTypes.string.isRequired,
  }).isRequired,
};

I'm not sure if using a number instead of a string as a key is "idiomatic" React; I didn't see an example of this in the React documentation either way.

[ljharb]

It’s not idiomatic JS, but it still should work :-)

[pawelnvk]

I agree, that object keys shouldn't be declared as numbers. It's something you should avoid, but this error shouldn't happen. I created PR that should fix this issue. Please checkout https://github.com/yannickcr/eslint-plugin-react/pull/2230