React Form Package
Edit page
IntroductionInstallationFormSimple FormButtonFieldFieldWrapperRadioGroupSelectForm ValidationStateMeta DescriptiononFocus onChange onBlurState ManipulationCustom Error MessagesFeedback on disabled ButtonStylingDynamic FieldsDynamic Fields 2Dynamic Fields 3Bind Input FieldsBind Input Fields 2Third Party ComponentsFile UploadWhy

State

Working with the state data and meta data

A simple Example of how your Form could look like:

<Form>
  <Field id="email" type="email" required />
  <Field id="password" type="password" required />
  <Button
    id="button"
    type="submit"
    onClick={(state) => this.handleOnClick(state)}
  >
    Submit
  </Button>
</Form>

You can also use onFocus, onChange, and onBlur on every Field, Select, or RadioGroup components to get access to the state of the form (more info)

As you can see the <Button /> component has a onClick property. This property takes a function. The handleOnClick function could look something like:

async handleOnClick(state) {
  // do something with the state
  // e.g. send data to a server
  try {
    const response = await fetch('https://server.com/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
      },
      body: JSON.stringify(state.data);
    });
    // do something with the response
  } catch(error) {
    // do something with the error
  }
}

As you can see the state parameter is an object. It has three different properties.

  • data: object
  • meta: object
  • formValid: boolean

In our case data would hold:

{
  "data": {
    "email": "",
    "password": ""
  }
}

meta would hold:

{
  "meta": {
    "email": {
      "initialValue": "",
      "dirty": false,
      "pristine": true,
      "visited": false,
      "touched": false,
      "value": "",
      "valid": false,
      "invalid": true,
      "rules": {
        "type": "email",
        "min": undefined,
        "max": undefined,
        "sameAs": undefined,
        "match": undefined,
        "required": true,
      }
    },
    "password": {
      "initialValue": "",
      "dirty": false,
      "pristine": true,
      "visited": false,
      "touched": false,
      "value": "",
      "valid": false,
      "invalid": true,
      "rules": {
        "type": "password",
        "min": undefined,
        "max": undefined,
        "sameAs": undefined,
        "match": undefined,
        "required": true,
      }
    }
  }
}

formValid would hold:

{
  "formValid": false
}

Meta Description

Meta data gives you an overview of what happened on that field. E.g. if a field is pristine you could deside to not send its data to the server since, nothing changed.

Property TypeDescription
initialValueString or Bool
dirtyBooltrue if the value !== initialValue
pristineBooltrue if the value === initialValue
visitedBooltrue if this field was focused (onFocus)
touchedBooltrue if this field was blurred (onBlur)
valueString or Bool
validBooltrue if this field is valid (passed all rules)
invalidBooltrue if this field is invalid (failed at least one rules)
rulesobjectthe rules for the validation of this field
rules.typeStringcheckbox, date, textarea, datetime-local, email, number, tel, text, password, time, url, radio, select
rules.minNumber or String (YYYY-MM-DD)text, textarea, password: this field has to have at least min characters; number, date: this field has to be at least min
rules.maxNumber or String (YYYY-MM-DD)text, textarea, password: this field has to have maximum max characters; number, date: this field has to be maximum max
rules.matchRegExthie fields has to match the regular expression
rules.sameAsStringthie fields has to have the same value as the field with id sameAs (e.g. password fields)
rules.requiredBoolthis field is required (has to have a value)