Argument properties

Introduction
Each callback function in React Advanced Form uses an "Object as argument" approach, meaning that it exposes an argument Object with the set of fixed properties. Take a look at the example:
1
export default class Example extends React.Component {
2
  handleSubmit = ({ serialized, fields, form }) => {}
3
​
4
  render() {
5
    return (
6
      <Form action={this.handleSubmit} />
7
    )
8
  }
9
}
Copied!
Notice how the argument of action handler (this.handleSubmit) is passed like an Object:
1
({ serialized, fields, form }) => {}
Copied!
This is the way how all arguments are passed to the custom callback functions. Argument properties like fields and form are always present in whichever callback method is being handled. On top of that, additional (or contextual) argument properties are passed to the argument Object as well.
Note: You may see argument Object properties including all the possible properties in the examples over here. That is done solely for demonstrational purposes, you do not need to include all argument properties – only the ones you need at the moment.
Benefits
Adopting this approach grants the following benefits:
Optional inclusion of arguments without unnecessary arguments listing:
1
// Common
2
function foo(a, b, c) {
3
  return c // only "c" argument is needed
4
}
5
​
6
// Object-as-an-argument
7
function foo({ c }) {
8
  return c
9
}
Copied!
Defined Object keys ensure the consistent namespaces throughout the whole implementation:
1
// Common
2
function handleFieldFocus(e, some, field) {}
3
​
4
// Object-as-argument
5
function handleFieldFocus({ event, field }) {}
Copied!
Easier dynamic composition:
1
// common
2
const dynamicArgs = [4, true]
3
​
4
function foo(...dynamicArgs) {}
5
​
6
// Object-as-argument
7
const dynamicArgs = {
8
  arg1: 4,
9
  arg2: true,
10
}
11
​
12
function foo(dynamicArgs) {}
Copied!
Keynotes
Names of argument properties is the same throughout all callback method handlers. If it's fields it's fields everywhere.
Names of argument properties is designed to be intuitive and clear. Please create a pull request if you find obscure variable names.

Getting started - Previous

Handle submit

Next - Architecture

Referencing

Last modified 3yr ago

Copy link

Contents

Introduction

Benefits

Keynotes