props validation for stateless components

[jasonblanchard]

For a sateless component that looks like this:

const statelessComponent = (props) => {
  const subRender = () => {
    return <span>{props.someProp}</span>;
  };

  return <div>{subRender()}</div>;
};

statelessComponent.propTypes = {
  someProp: PropTypes.string
};

eslint throws:

'someProp' is missing in props validation

Which is odd, because someProp is definitely in propTypes. A work-around to satisfy the linter is to store the prop in a variable outside subRender the function:

const statelessComponent = (props) => {
  const someProp = props.someProp;

  const subRender = () => {
    return <span>{someProp}</span>;
  };

  return <div>{subRender()}</div>;
};

statelessComponent.propTypes = {
  someProp: PropTypes.string
};

Or, add the subRender method as an instance method of statelessComponent and don't use props for the argument:

const statelessComponent = (props) => {
  return <div>{this.subRender(props)}</div>;
};

statelessComponent.subRender = (_props) => {
  return <span>{_props.someProp}</span>;
};

statelessComponent.propTypes = {
  someProp: PropTypes.string
};

I think this is either a bug in how the linter is checking for prop types, or, if the latter example is a preferred style, the message should be clearer about what's wrong here.