Eslint-plugin-react: `react/prop-types` fails on children-as-function

[nkbt]

When I pass anonymous function instead of children, I do not really want to define prop-types, since it is just a function and all validation is done down the line.

It used to be totally ok until one of the recent releases.

Yeah I know it could be confused with stateless React component, but it is really not, it is just a lambda. Maybe check if it is assigned to some var? Not sure if it is really fixable.

PS: https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626

[yannickcr]

Well, your function here is a stateless component (it receives some props and returns JSX), so it requires some prop-types.

We added support for destructured props in v4.0.0 (see #354), before that this pattern was just not detected.

If you does not want to add some prop-types to it you can disable the rule for this component (using a /* eslint-disable react/prop-types */ comment). Maybe we'll have an option to disable prop-types check on stateless components in the future, but it is not implemented yet.

[nkbt]

@yannickcr yeah, I completely understand that from the AST point of view, but there is a subtle difference between a component and lambda.

Simplified example:

// This one needs props validation, it is a component
const IAmStateless = ({name}) => (
  <div>{name}</div>
);
IAmStateless.propTypes = {
  name: React.PropTypes.string
};


const JustContainer = ({children: render}) => (
  <div>{render({text: 'Whatever'})}</div>
);

// Lambda inside does not need props validation, it is lambda
const App = () => (
  <JustContainer>
    {({text}) => <IAmStateless name={text} />}
  </JustContainer>
);

The other problem is that you cannot really specify propTypes for lambdas =). Unless using something really weird like Object.assign

We ended up disabling the rule in place temporarily, but that is not something we would like to do all the time.

Can the rule be updated to check if it is lambda and not assigned to any variable? I think it is legit case to automatically skip propTypes check (since you cannot really specify them)

Thanks!

[ljharb]

In that scenario, I'd assume the rule would indeed ignore it, for precisely the reason you suggest. Specifically, any inline function created in JSX props, or, as a JSX child (although it's super weird to pass a function as a child), should not be checked for propTypes.

[yannickcr]

Ho ok. I'm agree, that precise pattern should be ignored.

[nkbt]

Thanks!