How to set/change Field value from external user action

Question

There are many situations in which we might want to set the value of a specific field within a form to help out the user.

For example, an online fruit store may ask

Answer 1

This can be accomplished by providing a mutators object to the Form component containing the necessary mutators, which will be made available to your component:

 {
      utils.changeValue(state, 'apples', () => 1)
    },
    setMax: (args, state, utils) => {
      utils.changeValue(state, 'apples', () => 100)
    },
    setLast: (args, state, utils) => {
      utils.changeValue(state, 'apples', () => 6)
    },
  }}

  render={({ form, ...rest }) => (
    <>
      minimum apples
      maximum apples
      what I bought last time
    
  )}
/>

If you need to interact with the form from outside the React app (eg, you're using micro front-ends) you can save the form object (or any methods within) to the global scope using the render method, and call them as needed:

render={({ form, ...rest }) => {
  window.myGlobalProp = window.myGlobalProp ?? form;

  // ... rest of code
)}

// later anywhere else in app
myGlobalProp.form.mutators.setMax

Erik's post