Update value via function

[joeainsworth]

Overview

...

Motivation

Want to use App Bridge UI Resource Picker with useField().

I am trying to use the Resource Picker (which opens via button click) to obtain a product ID.

I'd then like the value to be set against a form input.

Setting configuration.objectRequired.value does not store the state.

  const {
    fields: {
      discountTitle,
      ...
      configuration
    },
    submit,
  } = useForm({
    fields: {
      discountTitle: useField(''),
      ...
      configuration: {
        objectType: useField(''),
        objectRequired: useField(''),
        gwpProduct: useField(''),
      }
    },
    onSubmit: async (form) => {
      const discount = {
        title: form.discountTitle,
        ...
        configuration: {
          objectType: configuration.objectType,
          objectRequired: configuration.objectRequired,
          gwpProduct: configuration.gwpProduct,
        },
      };

      submitForm({ discount: JSON.stringify(discount) }, { method: "post" });

      return { status: "success" };
    },
  });