I kind of wanted to display the colors according to what was chosen as the product in AutoComplete of the FieldArray component. For example, I chose Tumbler, this will show the list of colors the tumbler has which are Black, Pink, and Green. And if I’ll choose the product Shirt, the list of colors that will display are Blue and Black
How can I do this? Thank you.
This is the JSON.stringify(products)
[
{
prodName: "Tumbler",
size: "500",
colorMap: { Black: 20, Pink: 10, Green: 5 },
id: "aRLMZkiSU7T0lcsPCSsV"
},
{
prodName: "Shirt",
size: "L",
colorMap: { Blue: 10, Black: 10 },
id: "uTHIR6OQFRuqP9Drft0e"
},
{
size: "200",
colorMap: { Green: 50, Red: 19, Black: 20 },
prodName: "Notebook",
id: "y9ECyZBKp2OBekmWym4M"
}
];
I have recreated the problem in codesandbox: React Hook Form - Wizard Form - From Reddit with data - CodeSandbox
const FieldArray = ({ products }) => {
const options = products.map(
(object) =>
object.prodName +
" - " +
object.size +
);
console.log(fields, "f");
const selectedProduct = fields.map((object) => object.product);
console.log(selectedProduct, "selectedProduct");
return (
<div>
<ul>
{fields.map((item, index) => {
return (
<li key={item.id} style={{ listStyleType: "none" }}>
<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
}
renderInput={(params) => (
<TextField
{...params}
label="Product"
variant="outlined"
fullWidth
/>
)}
/>
)}
/>
<NestedArray
nestIndex={index}
{...{ control, register, products }}
/> //pass the corresponding colors here of the selected product (AutoComplete) in the above component
</li>
);
})}
</ul>
<section>
//button to add more product
</section>
</div>
);
};
export default FieldArray;
I have also posted this on: javascript - How can I show the corresponding colors of the product that was selected in AutoComplete and pass it to another component? - Stack Overflow