gca gca - 1 year ago 71
Javascript Question

React JS 'propTypes' validators running twice

The code below creates ordered and un-ordered list. Although other parts of code is not posted here because of irrelevance

I'm passing some properties to 'List' component by invoking it in 'Navigation' component. I'm validating the items received by 'List' by running some validations via propTypes of 'List'. However, I noticed that validations are running twice. I couldn't figure out why?

Is it because of some race conditions happening inside the code. Or, is it a bug in React?

var Navigation = React.createClass({
render: function() {
return (
<List type="ol" items={this.props.items} />
var List = React.createClass({
propTypes: {
type: React.PropTypes.string.isRequired,
items: React.PropTypes.array.isRequired,
customProp: function(props, propName, componentName) {
if (props["type"] !== "ol" && props["type"] !== "ul") {
return new Error("Incorrect list type provided");
getInitialState: function() {
return {
showList: true,
listType: this.props.type
render: function() {
return (
{this.props.items.map(function(item) {
return <ListItem data={item} />

React.render(<Navigation items={items} />, document.body);

gca gca
Answer Source

This is because of React's introduction of descriptors in 0.11 This issue is still present in v0.12. The links below talk more about this.

React Github issue on this

React v0.11 blog on propValidation

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download