Eslint-plugin-react: this.props.children throws error 'children' is missing in props validation

[mrrorinc]

I would like to use the reserved prop while not having to disable this rule. am I doing something wrong? Please advise!

{ this.props.children }

error 'children' is missing in props validation react/prop-types

[ljharb]

You can solve this simply by adding children to propTypes - there's nothing "reserved" about it.

[mrrorinc]

indeed, this seemed to do it "react/prop-types": [2, { ignore: ['children'] }], thank you for your guidance!

[ljharb]

Sure, that's one way. Better would be to explicitly denote in propTypes when your component uses/requires children :-)

[mrrorinc]

may I ask for a code snippet, please? thanks!

[ljharb]

@mrrorinc

function Foo() { return this.props.children; }
Foo.propTypes = { children: React.PropTypes.node.isRequired };
<Foo />; // ← error

[mrrorinc]

@ljharb muchas gracias, el senior! :beers: since this project is ES6, under my class declaration simply:

AppWrapper.propTypes = { children: React.PropTypes.element.isRequired } cheers

[olivierlacan]

For folks bumping into this now that React.PropTypes is deprecated and the prop-types package is recommended instead, here's the fix:

static propTypes = {
  children: PropTypes.node.isRequired
};

Hope that helps.

[ncatranis]

@olivierlacan thanks for the tip! This is what worked for me, with eslint-plugin-react 7.11.1

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Layout extends Component {
    state = {};

    render() {
        return(
            <div>
                {this.props.children}
            </div>
        );
    }
}

Layout.propTypes = {
    children: PropTypes.node.isRequired
};

export default Layout;