2

I tried different ways to implement mutator to convert text to uppercase as soon as user input text in the text field. But was not yet successful. The example provided by Erick seems correct, but maybe I am missing something.

/** Converts a form value to uppercase **/
const upper = ([name], state, { changeValue }) => {
  changeValue(state, name, (value) => value.toUpperCase())
}


<Form
  onSubmit={onSubmit}
  mutators={{
    ...arrayMutators,
    upper
  }}
  render={({
    handleSubmit,
    mutators: { push, pop, upper }, // injected from final-form-arrays above
    pristine,
    reset,
    submitting,
    values
  }) => {
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Company</label>
          <Field name="company" component="input" onChange={(e) => upper('company')} />
        </div>
      </form>
    )}
  }
/>

It's throwing an error when calling toUpperCase on value as value is coming undefined there. Really appreciate any help!

Update: 27-Oct-2018

I have realized we can use parser too, to solve this problem:

upper = value => {
  return value ? value.toUpperCase() : ''
}


<Field name="company" component="input" parse={this.upper} />

Still looking for how mutator works and what's the error in my code.

Already Tried: Mutate state based on existing fields

How to set/change Field value from external user action 🏁 React Final Form

Pardeep Dhingra
  • 3,916
  • 7
  • 30
  • 56

1 Answers1

1

As I know about react-final-form you can get this data directly I will suggest, you can use this code onChange={(event, value) => input.onChange(value.toUpperCase())}

https://codesandbox.io/s/0x9y71nwyp

nilesh bhingaradiya
  • 301
  • 2
  • 4
  • Thanks for the answers. This has solved my problem of converting text to uppercase. But I want to know how we can achieve it through mutator too. – Pardeep Dhingra Oct 23 '18 at 14:11