React Advanced Form

In the end, it's all about sending the gathered data somewhere. Let's implement the most common scenario—sending the serialized form data to a remote end-point.
Implementation
Form submit is handled by the action prop provided directly to the Form component:
import React from 'react'
import { Form } from 'react-advanced-form'
​
export default class ExampleForm extends React.Component {
  render() {
    return (
      <Form action={this.registerUser}>
        {/* ... */}
      </Form>
    )
  }
}
The action prop expects a function which returns a Promise. By returning the latter Form can properly react to the Promise status, which is a submit request status at the same time.
import React from 'react'
import { Form } from 'react-advanced-form'
​
export default class ExampleForm extends React.Component {
  registerUser = ({ serialized, fields, form }) => {
    return fetch(API_URL, {
      method: 'POST',
      body: JSON.stringify(serialized),
    })
  }
​
  render() {
    return (
      <Form action={this.registerUser}>
        {/* ... */}
      </Form>
    )
  }
}
Read more about the action prop.

Getting started - Previous

Applying validation

Next - Architecture

Argument properties