gca gca - 18 days ago 6
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

Question:
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 (
<nav>
<List type="ol" items={this.props.items} />
</nav>
);
}
});
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.state.listType>
{this.props.items.map(function(item) {
return <ListItem data={item} />
})}
</this.state.listType>
)
}
});

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

gca gca
Answer

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

Comments