How to use react-formal - 5 common examples

const Form = require('react-formal')
const { object, string, number, date } = require('yup')

// if we are using a different set of inputs
// we can set some defaults once at the beginning
Form.addInputTypes(require('react-formal-inputs'))

const modelSchema = object({
  name: object({
    first: string().required('please enter a first name'),
    last: string().required('please enter a surname'),
  }),

  dateOfBirth: date().max(new Date(), "You can't be born in the future!"),

  colorId: number()
    .nullable()
    .required('Please select a color'),
})

render(
  <form></form>

import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import muiTheme from "../styles/mui-theme";
import theme from "../styles/theme";
import { StyleSheet, css } from "aphrodite";
import injectTapEventPlugin from "react-tap-event-plugin";
import Form from "react-formal";
import GSTextField from "./forms/GSTextField";
import GSDateField from "./forms/GSDateField";
import GSScriptField from "./forms/GSScriptField";
import GSSelectField from "./forms/GSSelectField";
import GSPasswordField from "./forms/GSPasswordField";

// Needed for MaterialUI
injectTapEventPlugin();

Form.addInputTypes({
  string: GSTextField,
  number: GSTextField,
  date: GSDateField,
  email: GSTextField,
  script: GSScriptField,
  select: GSSelectField,
  password: GSPasswordField
});

const styles = StyleSheet.create({
  root: {
    ...theme.text.body,
    height: "100%"
  }
});

import React from 'react';
import { Link, RouteHandler, Navigation, State } from 'react-router';
import Layout from './_layout/base';
import {Grid, Row, Col, Nav}  from 'react-bootstrap';
import { NavItemLink } from 'react-router-bootstrap';
import configureStore from '../store/configure';
import { Provider } from 'react-redux';
import { Map } from 'immutable';
import cx from 'classnames';
import Form from 'react-formal';
import _ from 'lodash';

/*Plugin configure*/

Form.addInputTypes(
  require('react-formal-inputs')
);


import posts from './post/definition';
import events from './event/definition';

const store = configureStore(Map({
  collections: Map({
    posts: Map({}),
    events:Map({}),
    topics: Map({}),
    users: Map({}),
  }),
  resources: Map({
    posts,

} else if (child.type === Form.Field) {
        const name = child.props.name;
        let error = this.state.formErrors ? this.state.formErrors[name] : null;
        let clonedElement = child;
        if (error) {
          error = error[0]
            ? error[0].message.replace(name, child.props.label)
            : null;
          clonedElement = React.cloneElement(child, {
            errorText: error
          });
        }
        return React.cloneElement(clonedElement, {
          events: ["onBlur"]
        });
      } else if (child.type === Form.Button) {
        return React.cloneElement(child, {
          component: GSSubmitButton,
          isSubmitting: this.state.isSubmitting
        });
      } else if (child.props && child.props.children) {
        return React.cloneElement(child, {
          children: this.renderChildren(child.props.children)
        });
      }
      return child;
    });
  }

return React.Children.map(children, child => {
      if (child === null) {
        return child;
      } else if (child.type === Form.Field) {
        const name = child.props.name;
        let error = this.state.formErrors ? this.state.formErrors[name] : null;
        let clonedElement = child;
        if (error) {
          error = error[0]
            ? error[0].message.replace(name, child.props.label)
            : null;
          clonedElement = React.cloneElement(child, {
            errorText: error
          });
        }
        return React.cloneElement(clonedElement, {
          events: ["onBlur"]
        });
      } else if (child.type === Form.Button) {
        return React.cloneElement(child, {