React-Bootstrap ValidationMessagesView Shared Component

/**
 * ValidationMessagesView
 * 		Shows a bootstrap alert panel with validation messages. Expects props to be
 * 		an array.
 */

var React = require('react');

var Alert = require('react-bootstrap').Alert;

var ValidationMessagesView = React.createClass({


  displayName : "ValidationMessagesView",

  propTypes : {
    validationMessages : React.PropTypes.array
  },

  render() {
    var messages = Array.isArray(messages) ? this.props.validationMessages : [this.props.validationMessages] ;

    // safe catch - in case this component is called with no validationMessages
    if (!Array.isArray(this.props.validationMessages) && (typeof this.props.validationMessages !== 'object')) {
      return (<span></span>);
    }

    var validationMessages = '';

    if (this.props.validationMessages && Array.isArray(this.props.validationMessages)) {
      var errors = this.props.validationMessages.map(function(err,i) {
        return (<li key={i}>{err.help}</li>);
      });

      validationMessages = (
        <div>
          <Alert bsStyle="danger">
            <ul>
              {errors}
            </ul>
          </Alert>
        </div>
      );
    }
    // it's a single object - this would most likely be passed by js-data custom validation method
    else {
      // log this in errorShelter so we can find out about it
      new Error("ValidationMessagesView - Most likely an error from js-data. props: " + this.props.validationMessages);

      var singleValidationError = this.props.validationMessages.message || this.props.validationMessages.help || 'Form Validation Error...';

      validationMessages = (
        <div>
          <Alert bsStyle="danger">
            <ul>
              <li>
                {singleValidationError}
              </li>
            </ul>
          </Alert>
        </div>
      );
    }


    return (
      <span>
        {validationMessages}
      </span>
    );
  }
});

module.exports = ValidationMessagesView;