To participate in the demonstration you will need:

• Javascript enabled
• A modern browser

All examples given are written with babel loaders to support es6 (stage-0) and JSX syntax.

Basic Example

In the basic example we are interested in populating data about a movie; the title and the year. In this case we need a single form, and a presentational component. We'll validate that the data has a title.

Below the form inputs you'll see the current value of the `form` prop passed to the form's `onChange` handler.

Loading... Loading...

Nested Example

In this example we show how two different forms can be combined into one. This helps with resusability of form validations. We have a form designed to validate a person, and our previous movie form. By combining them we can capitalise on them in many locations. In this instance we'll add a director to the movie.

Loading... Loading...

Array Example

In a more complicated example, we'll take the same setup as for the nested example, but add a list of actors, also using the `PersonForm`.

This example also includes some form level validation. The form will generate a warning when the user has entered the move title "Jaws".

Loading... Loading...