no-unused-prop-types rule does not recognise component that returns an array

[leonaves]

Example:

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

const TestComponent = () => (
  ['one', 'two', 'three'].map(text => <div>{ text }</div>)
);

TestComponent.propTypes = {
  customClass: PropTypes.string,
};

export default TestComponent;

React 16 allows for arrays to be returned from components, but in the above example, the no-unused-prop-types seems to not recognise that customClass is unused. It does detect it when the component is changed to:

const TestComponent = () => {
  const componentArr = ['one', 'two', 'three'].map(text => <div>{ text }</div>);
  return <div>{ componentArr }</div>;
};

[ljharb]

Our component detection likely requires a component to return JSX.

It becomes very very difficult to detect if an SFC that returns no JSX is in fact a component. A temporary workaround should be to add a comment above the SFC that says /* @extends React.Component */.

[nodkrot]

This similarly applies to this rule as well https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md

[ljharb]

Note that you can also return a React.Fragment or <>.

[nodkrot]

That could work as a wrapper 👍

[leonaves]

Forgot about this, but re-reading, why do you need to detect that the function is a component? If the prop is unused in the function body then the rule should error, it shouldn't matter if it returns JSX or not.

[ljharb]

@leonaves if it's not a component, then it doesn't have "props" - it has arguments, and it can't have propTypes.