How would I be able to pass the product ID according to what product was selected?

JavaScript
1

I have this selection of products and I wonder how I could save the selected product ID this as well?

In the console.log(fields, "fields"); , this is where I can see the saved product. So how can I save the selected product id as well?

Any help would be appreciated. Thank you.

Codesandbox: React Hook Form - Wizard Form - From Reddit with data - CodeSandbox

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 : ""}` +
    " "
);

console.log(options, "options");

const FieldArray = ({ control, register, setValue, getValues }) => {
  const { fields, append, remove, prepends } = useFieldArray({
    control,
    name: "order"
  });

  console.log(fields, "fields");

  renderCount++;

  return (
    <div>
      <ul>
        {fields.map((item, index) => {
          console.log(item);
          return (
            <li key={item.id}>
              <Controller
                control={control}
                name={`order.${index}.product`}
                render={({ field: { onChange, value = "", ...rest } }) => (
                  <Autocomplete
                    {...rest}
                    onInputChange={(e, newValue) => {
                      onChange(newValue);
                      console.log(newValue, "new value");
                    }}
                    inputValue={value}
                    options={products}
                    // isOptionEqualToValue={(option, value) =>
                    //   option?.value === value?.value
                    // }
                    getOptionLabel={(option) =>
                      option.prodName + " " + option.size
                    }
                    // getOptionLabel={(option) => option?.label ?? ""}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        label="Product"
                        variant="outlined"
                        fullWidth
                      />
                    )}
                  />
                )}
              />

          );
        })}
    </div>
  );
};

export default FieldArray;
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.