Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

this.props.children throws error 'children' is missing in props validation #522

Closed
mrrorinc opened this issue Mar 31, 2016 · 8 comments
Closed

Comments

@mrrorinc
Copy link

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
Copy link
Member

ljharb commented Mar 31, 2016

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

@mrrorinc
Copy link
Author

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

@ljharb
Copy link
Member

ljharb commented Mar 31, 2016

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

@mrrorinc
Copy link
Author

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

@ljharb
Copy link
Member

ljharb commented Mar 31, 2016

@mrrorinc

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

@mrrorinc
Copy link
Author

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

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

@olivierlacan
Copy link

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
Copy link

ncatranis commented Dec 23, 2018

@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;

PaulRBerg added a commit to sablier-labs/v1-protocol that referenced this issue Aug 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

4 participants