Skip to content

this.props.children and react/prop-types rule #7

@remitbri

Description

@remitbri

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

Shouldn't it be an exception?

Activity

yannickcr

yannickcr commented on Mar 2, 2015

@yannickcr
Member

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

self-assigned this
on Mar 2, 2015
AsaAyers

AsaAyers commented on Mar 24, 2015

@AsaAyers

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

yannickcr

yannickcr commented on Mar 24, 2015

@yannickcr
Member

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

AsaAyers commented on Mar 24, 2015

@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

sebastienbarre commented on Apr 7, 2015

@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

remitbri commented on Apr 7, 2015

@remitbri
Author

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

AsaAyers

AsaAyers commented on Apr 7, 2015

@AsaAyers

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

sebastienbarre

sebastienbarre commented on Apr 7, 2015

@sebastienbarre

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

AsaAyers

AsaAyers commented on Apr 7, 2015

@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

remitbri commented on Apr 7, 2015

@remitbri
Author

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

yannickcr commented on Apr 7, 2015

@yannickcr
Member

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.

6 remaining items

resistdesign

resistdesign commented on Nov 29, 2015

@resistdesign

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

AsaAyers

AsaAyers commented on Nov 29, 2015

@AsaAyers

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

joaomilho

joaomilho commented on Jan 25, 2016

@joaomilho

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

lencioni

lencioni commented on Sep 16, 2016

@lencioni
Collaborator

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

jdanilov commented on Feb 18, 2018

@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

Denly commented on Mar 15, 2018

@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,
 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @yannickcr@matthewwithanm@remitbri@lencioni@reggi

      Issue actions

        this.props.children and `react/prop-types` rule · Issue #7 · jsx-eslint/eslint-plugin-react