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?
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.
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.
Oh my god. You are so right. I feel stupid. I guess I was validating something the bad way. Sorry for the noise.
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.