Eslint-plugin-react: Validation error for render prop

[maiertech]

I have a simple static functional component that defines a render prop:

Component.propTypes = {
  anchor: PropTypes.func
}

and a corresponding default:

Component.defaultProps = {
  anchor: ({ href, children }) => <a href={href}>{children}</a>
}

This triggers react/prop-types for function arguments href and children claiming missing props validations. I'm am not aware of any way to validate arguments of a function. Is there anything I can do other than turn off the rule for each false positive?

[ljharb]

Not really - functions that return JSX are components, according to our component detection.

However, this seems like a case where the rule should be able to determine that's not a component.

[psixdev]

I had a slightly different situation:

const React = require('react');
const OtherComponent = require('./OtherComponent');

function Component() {
    return (
        <OtherComponent
            renderFoo={(foo) => <div>{foo.name}</div>}
            renderBaz={({baz}) => <div>{baz.name}</div>}
            renders={[{
                foo: (foo) => <div>{foo.name}</div>,
                baz: ({baz}) => <div>{baz.name}</div>
            }]}
        />
    );
}

module.exports = Component;

I got a single error:

10:12  error  'baz' is missing in props validation  react/prop-types

I think that there should be no errors at all.

[ljharb]

This is the same case where we should be able to determine that the function is not a component because it’s defined inline, in a jsx context, as an arrow function.

[jzabala]

After #2699 functions starting with a lowercase letter are not considered component.

This should be fixed now.

@ljharb