How would I save the product ID according to what value was selected in the AutoComplete inside the useFieldArray?

[forjen127]

So I have this selection where the user can choose a product. Each product has a an ID. Is it possible to also save the product ID when I submit this?

I have recreated this in codesandbox as well: https://codesandbox.io/s/react-hook-form-wizard-form-from-reddit-with-data-ouy64e?file=/src/fieldArray.js:772-957

Data:

const products = [
  {
    prodName: "Tumbler",
    price: 1.5,
    size: "500",
    colorMap: { Black: 20, Pink: 10, Green: 5 },
    id: "aRLMZkiSU7T0lcsPCSsV"
  },
  {
    prodName: "Shirt",
    price: 2.0,
    size: "L",
    colorMap: { Blue: 10, Black: 10 },
    id: "uTHIR6OQFRuqP9Drft0e"
  },
  {
    size: "200",
    price: 2.0,
    colorMap: { Green: 50, Red: 19, Black: 20 },
    prodName: "Notebook",
    id: "y9ECyZBKp2OBekmWym4M"
  }
];

const options = products.map(
  (object) =>
    object.prodName +
    " - " +
    object.size +
    `${object.cat === "CM" || object.cat === "ML" ? "- " + object.cat : ""}` +
    " "
);

 <Controller
                control={control}
                name={`order.${index}.product`}
                render={({ field: { onChange, value = "", ...rest } }) => (
                  <Autocomplete
                    {...rest}
                    onInputChange={(e, newValue) => {
                      onChange(newValue);
                    }}
                    inputValue={value}
                    options={options}
                    isOptionEqualToValue={(option, value) =>
                      option?.value === value?.value
                    }
                    // getOptionLabel={(option) => option?.label ?? ""}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        label="Product"
                        variant="outlined"
                        fullWidth
                      />
                    )}
                  />
                )}
              />

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
              <NestedArray nestIndex={index} {...{ control, register }} />
            </li>
          );
        })}

[Moshyfawn]

RHF uses id field as it's internal uuid to track the field array values, position etc. You can reassigne the field name used by RHF by passing keyName prop to useFieldArray hook with the name of the field you want to be used instead.

const { fields } = useFieldArray({
  keyName: "key"
})

return fields.map(field =>
  // INFO: access the set `keyName` field value for the field's id instead 
  <input key={field.key} />
)

This will result in your field array data set having the your initial data id field on substitution

[forjen127]

What I meant was to retrieve the product ID according to what product was selected. For example, I selected Tumbler, I wanted to also get or save the product ID of Tumbler which is "aRLMZkiSU7T0lcsPCSsV"

[kszinhu]

thanks a lot bro <3