Eslint-plugin-react: this.props.children and `react/prop-types` rule

[remitbri]

Using this.props.children triggers the rule (_"'children' is missing in props validation"_).

Shouldn't it be an exception?

[yannickcr]

Right, we should add an exception for this.props.children

[AsaAyers]

Why should children be an exception? I think you should document when a component does accept or require children.

[yannickcr]

You're right, but I rarely seen some propTypes for this.props.children so it dot not seems to be a common practice to me.

Maybe we can introduce an option to prop-types to re-include children in the props list to check?

[AsaAyers]

It seems to me like most components don't need this.props.children, so to me that makes it extra important to document children in the propTypes.

I think the option idea is fine. I'm interested in hearing why anyone would want to run this against all other prop types, but never against children. It seems not well thought out to me, but I kind of hope I'm just missing something.

[sebastienbarre]

All good points. [UPDATED]
I think @AsaAyers is onto something, considering the Single Child section in the React doc:

With React.PropTypes.element you can specify that only a single child can be passed to a component as children.

  propTypes: {
    children: React.PropTypes.element.isRequired
  },

In other cases when this.props.children might be used (or not), this below could probably do the trick:

  propTypes: {
    children: React.PropTypes.oneOfType([
      React.PropTypes.arrayOf(React.PropTypes.node),
      React.PropTypes.node
    ])
  },
  getDefaultProps: function() {
    return {
      children: null // or [] I guess
    };
  },

[remitbri]

I ended up with React.PropTypes.node to solve my issues…

[AsaAyers]

It looks like I have a combination of element, node, a few strings, and an arrayOf(...shape(...)).

[sebastienbarre]

@remitbri thanks, I updated my comment above accordingly. What's your default prop value? null?

[AsaAyers]

React.PropTypes.any is also an option. If I really had a component that could support 0, 1, or more children I'd probably just stick with .any to document that children is used.

[remitbri]

Hmmm, my component is a wrapper, which could stand on its own, so I didn't set a default prop value. Bad practice? I guess if I had to set one then it should be null

[yannickcr]

Since 2.0.0 children is no longer ignored for props validation.

If you still want to ignore it you can use the ignore option.

[matthewwithanm]

@AsaAyers Won't node handle those cases too?

[AsaAyers]

yes, I think node is a better option than any, I just hadn't used it much at the time I commented.

[matthewwithanm]

👍 Thanks, just making sure.

[reggi]

Just to clarify, children should be defined as type node, like this:

propTypes: {
  children: React.PropTypes.node
}

[resistdesign]

I know this is closed, but wouldn't children be inherited from Component? Or is OOP not a thing anymore?

[AsaAyers]

Not all Components have children. In a couple of my projects I have an <Avatar user={userObject} />

[joaomilho]

@resistdesign actually yeah, OOP is not _the main_ thing anymore, at least in React's world.

[lencioni]

Why do you need oneOfType here? The node propType is defined as "Anything that can be rendered: numbers, strings, elements or an array (or fragment) containing these types." https://facebook.github.io/react/docs/reusable-components.html

You should use children: PropTypes.node.

[jdanilov]

Justin case you're wondering how to do that in Flow, use React.Node as described here:
https://flow.org/en/docs/react/types/#toc-react-node

type Props = {
  children: React.Node,
};

[Denly]

PropTypes.node can be an array, so no need the React.PropTypes.arrayOf(React.PropTypes.node) @sebastienbarre

// Anything that can be rendered: numbers, strings, elements or an array
  // (or fragment) containing these types.
  optionalNode: PropTypes.node,