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

Comments

@mrrorinc
Copy link

@mrrorinc mrrorinc commented Mar 31, 2016

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

This comment has been minimized.

Copy link
Collaborator

@ljharb ljharb commented Mar 31, 2016

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

@mrrorinc

This comment has been minimized.

Copy link
Author

@mrrorinc mrrorinc commented Mar 31, 2016

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

@mrrorinc mrrorinc closed this Mar 31, 2016
@ljharb

This comment has been minimized.

Copy link
Collaborator

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

This comment has been minimized.

Copy link
Author

@mrrorinc mrrorinc commented Mar 31, 2016

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

@ljharb

This comment has been minimized.

Copy link
Collaborator

@ljharb ljharb commented Mar 31, 2016

@mrrorinc

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

This comment has been minimized.

Copy link
Author

@mrrorinc mrrorinc commented Mar 31, 2016

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

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

@olivierlacan

This comment has been minimized.

Copy link

@olivierlacan olivierlacan commented Nov 17, 2018

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

This comment has been minimized.

Copy link

@ncatranis 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.