react-jsonschema-form transformErrors demo

https://github.com/mozilla-services/react-jsonschema-form

HTML

<script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<h3>transformErrors demo</h3>
  <div id="main"></div>
</div>

Babel + JSX

const SchemaForm = JSONSchemaForm.default;

let schema = {
  type: "string",
  title: "FirstName",
  minLength: 12,
  required: true,
  messages: {
    required: "Please enter your First name",
    minLength: "First name should be > 5 characters"
  }
};

const MySchemaForm = props => {
  // make errors more readable based on schema definition if any
  const transformErrors = errors => {
    return errors.map(error => {
      // use error messages from JSON schema if any
      if (error.schema.messages && error.schema.messages[error.name]) {
        return {
          ...error,
          message: error.schema.messages[error.name]
        };
      }
      return error;
    });
  };

  return (
    <SchemaForm
      { ...props }
      schema={schema}
      liveValidate
      showErrorList={false}
      transformErrors={transformErrors}
   / >
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {formData: {}};
  }
  onSubmit({formData}) {
    this.setState({formData});
  }
  render() {
    return (
      <div>
        <MySchemaForm formData=""/>
      </div>
    );
  }
}

React.render(<App />, 
             document.getElementById("main"));