gca gca - 2 months ago 16
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

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