React: React.PropTypes.node should accept stateless component (function)

Created on 22 Nov 2015 · 3Comments · Source: facebook/react

I just replaced some react components that where defined using es6 classes and I am now getting warnings about my react stateless component (that are just fuction) not being a ReactNode.

Warning: Failed propType: Invalid prop `Loader` supplied to `Picture`, expected a ReactNode.

I were validating some components using React.PropTypes.node, but now I need to use PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]) which seems a bit long to say "this can be anything that can be rendered as a component" (which is what ProTypes.node is supposed to cover right?).

From the doc

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

Maybe func should be added? Or is there any reason why node doesn't handle func as well?

Source

MoOx

👍3

Most helpful comment

Can you show how you were using this? I don't think Component Classes should have been valid for node either. node is supposed to accept anything that can be rendered. Classes can't be rendered directly - you would pass an element with the type set.

zpao on 23 Nov 2015

👍3

All 3 comments

What about adding new propType validator? Something like

propTypes: {
    optionalComponent: React.PropTypes.component
}

where component would have form of

PropTypes.oneOfType([ PropTypes.node, PropTypes.func ])

or something similar. In my opinion it is quite dangerous to let people pass in functions, but I'm not sure how to make better validation. Reading function.toString seems like a gigantic hack which would not work after minification, but this is the only option I'm aware of.