In this tutorial, you will learn how to build simple forms within React using JSON schema.  Over the years, I've created hundreds of forms.  Creating forms is probably my least favourite task in the world.  When writing the code to create a form, the majority of your effort will be in copying and pasting the boilerplate code and ensuring your end form hasn't got any bugs.  Anything to alleviate the pain works with me, which is why I recommend that you consider checking out JSON schema.

What Is JSON Schema?

As the name implies, React JSON schema form, allows you to define your form using JSON!  You can then pass your JSON schema into a component and your form magically builds; sounds good right?  To get started with React JSON schema form, install it via NPM:

 npm install react-jsonschema-form --save

Once the library is installed, you can need to define your schema, like so:

import Form from 'react-jsonschema-form'

const mySchema ={
  "title": "My Form",
  "description": "My Form",
  "type": "object",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "title": "Name",
"default": "Jon" } } };

You can then create a form, like this:

  const MyForm = () => ( <Form schema={mySchema} /> )
  <MyForm />

When we run the code, you should see something like this:

 

I know what you're thinking, beautiful right?  Defining a simple form in JSON through configuration rather than code will make your life easier.  In JSON schema we declare the properties for the form, in this case, a single textbox element, called Name.  The 'name' element is required and if you try and submit the form it will error.  One thing to note is that the submit button is generated for us, however, it is not hooked up.  

The point of all forms is to do some action when the form is submitted, email, store to database etc...  to handle the submission, create a new event handler, like this:

import React, { Component } from 'react';
import Form from 'react-jsonschema-form'

const mySchema ={
  "title": "My Form",
  "description": "My Form",
  "type": "object",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "title": "Name"
    }
  }
};

export default class MyForm extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit({formData}) {
        console.log(formData);
    }

    render() {
        return (
            <Form schema={mySchema} onSubmit={this.handleSubmit} />
        )
    }
}

Hooking up the submit button is pretty simple. Create a normal React component. Hook up an event handler as normal, binding it within the constructor. When the form is submitted the handler will receive an object with a key for each field in the form, simple!

If you have some super custom complex form, then React JSON schema might not be the best fit.  For fairly simple forms though, you must agree that defining a form in JSON is a lot less tedious than manually having to write it! More information can be found here

If you want to see the form in action, you can download my sample React site, with a working example in it from here:

https://github.com/jondjones/JonDJones.React.BaseBuild