Using Form

Almost every web application implements the C.R.U.D. model. So far, we’ve gone over several ways to Read data from your API using powerful declarative React components. The ability to Create and Update data is the purpose of the <Form /> component.

The <Form /> component provides a way to …

• Use Model schemas to keep track of form fields
• Use Model routes to avoid hard-coding API routes
• Perform client-side form validations and populate error messages
• Create or update data in your JSON API
• Hook into form callbacks that give you granular control over data

…all while skipping a ton of boilerplate!

Contents

1. Basic Example
2. Available Props
3. The Form Object
   1. Field Props
   2. Submit Props
   3. Other Form Object Properties

Basic Example

If you can read JSX, you can learn a lot about how the <Form /> component operates by viewing how it’s used. Here’s a basic example of the <Form /> component in a typical sign-up form.

import ReactiveRecord, { Form } from "reactiverecord"
const User = ReactiveRecord.model("User")
...
return (
  <Form for={new User()}>
    {fields => (
      <Fragment>
        <Input {...fields.full_name} />
        <Input {...fields.email} />
        <Input {...fields.password} />
        <Button {...fields.submit}>Sign Up</Button>
      </Fragment>
    )}
  </Form>
)

<form>
  <label>
    Full Name <input />
  </label>
  <label>
    Email <input />
  </label>
  <label>
    Password <input />
  </label>
  <button>Sign Up</button>
</form>

{
  "full_name": "General Tzo",
  "email": "general@tzo.com",
  "password": "chickens-23"
}

Amazing! Let’s talk about what’s written here.

1. By passing in a new User() instance as the for prop, we’re telling the <Form /> component to expect fields based on the User model’s schema.
2. Because it’s a new user, it’s assumed the resource doesn’t exist, which means the appropriate form method is POST.
3. We know the route configuration from the model class, so the form action will be /users.
4. Like other Reactive Record components, the <Form /> component expects a function as its child. The function received a form object, which contains properties that help build the individual form fields. We can pass those properties directly to our <Input /> components, which we’ll go over in detail later.

Available Props

The Form Object

The function passed in as children for the <Form /> component receives an object containing properties used to build form controls within the form. The properties map directly to the form resource’s schema. For instance, if the schema for a model called Session is:

Session.schema = {
  username: String,
  password: String
}

… the resulting form object would contain:

{
  username: {…},
  password: {…},
  submit: {…},
  submitting: false,
  validating: false,
  fieldsFor: ƒ()
}

There are additional properties in the above object that are not in the schema, which we will go over shortly. Let’s start with the first property, username. It contains individual field props.

Field Props

The <Form /> component builds field props for each attribute in the schema. These field props can be passed directly to form controls to render the correct data. Here is a list of the default field props given for each schema attribute:

Submit Props

The form object contains a submit property, which can be passed directly to a <button> element, which submits the form. It contains the following attributes:

Other Form Object Properties