score:0

ok pennie, for building a dynamic options (if i understood what you are tring to develop here).

i think you should pass the options as props into the nestedfieldsarray.js,

fieldsarray.js->

<nestedarraynestindex={index}
                {...{ control, register, options }}
              />

and in the nestedfieldsarray.js->

const nestedarray = ({ nestindex, control, register, options }) => {
  const { fields, remove, append } = usefieldarray({
    control,
    name: `order[${nestindex}].variation`
  });

and remove the hard coded options-

 const options = [ //should be delete 
    { label: "red", value: "red" },
    { label: "green", value: "green" },
    { label: "blue", value: "blue" }
  ];

https://codesandbox.io/s/react-hook-form-wizard-form-from-reddit-with-data-forked-ledb12?file=/src/nestedfieldarray.js

score:2

i did not dig in to see how react-hook-form works, so you can probably come up with a nicer solution.

here is my solution in codesandbox: https://codesandbox.io/s/react-hook-form-wizard-form-from-reddit-with-data-setting-up-a-setproduct-forked-wyo8i2?file=/src/index.js

to describe the changes i made:

  • i added a state variable in fieldarray to hold the currently selected product. (you probably incorporate this better using your form library). the value is then passed to nestedarray.
  • edited the rendered <autocomplete> props in fieldarray to include onchange instead of oninputchange (used onchange instead of oninputchange to get the product object instead of the generated label as an argument to the function).

i aslo had to map the colors of the product object to an array similar to the one you had created.

const options = object.keys(product.colormap).map((color) => ({
      label: color,
      value: color
  }))

Related Query

More Query from same tag