I use this pattern often:

/** @jsx React.DOM */

var Hello = React.createClass({
    propTypes: {
        modifiers: React.PropTypes.arrayOf(
            React.PropTypes.oneOf(['large', 'colored', 'fill'])
        )
    },
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

It's useful for flags that change too often and go straight to CSS without imposing any logic onto the component.

Say I pass an unsupported modifier:

React.renderComponent(<Hello name="World" modifiers={['other']} />, document.body);

React spits out an unhelpful warning:

Warning: Invalid prop `0` supplied to `Hello`, expected one of ["fill","colored","large"].

It's unhelpful because I have no idea what string 0 index corresponds to until I look it up in the code. It would save me a lot of time and hassle to see the actual array value that failed the check.

It there any reason why we don't show the value? Is it because it may not be serializable? Any workarounds?