State Manipulation

How to manipulate the state before it is validated

Sometimes you need to manipulate the value of a input. It is not recommended, but there are some edge cases and situations where this comes in handy, e.g. you have an input and you have to ensure that the user capitalizes the first letter, e.g. on names.

For this use cases there is a property called preOnChange. This property takes a function that returns the new value of the input. You can only manipulate the value of the current input field.

The next example manipulates the input value that it always capitalizes the first letter of every word in the input field.

<Form validate>
  <div>
    <div>Name:</div>
    <Field
      id="name"
      type="text"
      // `value` is the current value of the input field
      preOnChange={value => autocapitalize(value, 'words')}
      required
    />
  </div>
  <div>
    <Button
      id="submit"
      type="submit"
      onClick={state => {
        alert(JSON.stringify(state, null, 2))
        alert('open the console to see the whole state...')
        console.log(state)
      }}
    >
      Submit
    </Button>
  </div>
</Form><Form validate>
  <div>
    <div>Name:</div>
    <Field
      id="name"
      type="text"
      // `value` is the current value of the input field
      preOnChange={value => autocapitalize(value, 'words')}
      required
    />
  </div>
  <div>
    <Button
      id="submit"
      type="submit"
      onClick={state => {
        alert(JSON.stringify(state, null, 2))
        alert('open the console to see the whole state...')
        console.log(state)
      }}
    >
      Submit
    </Button>
  </div>
</Form>