When it goes to getDropDownOptions, I get this error - Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. I'm not using any componentWillUpdate or componentDidUpdate, neither setting state anywhere related to this functionality. rowInfo is the Items inside an array, that Im mapping. allProducts is the data I'm getting from a parent component.
return (
<SelectBox
options={getDropdownOptions}
value={{ label: '', value: '' }}
onChange={e =>
onItemChange({
itemKey: headerItem.itemKey,
arrayIndex: index,
value: { label: e.value, value: e.value }
})
}
customClass="lineItemDropdown"
/> ```
const getDropdownOptions = () => {
const dropDownOptions = allProducts.find(
product => product.productId === rowInfo.productId
).packages;
return dropDownOptions;
};
In your example you are passing a reference to a function for options instead of the value that the function returns.
Right now, if you were to console.log(props.options), you would see a function....but you need an array.
So try this:
<SelectBox
options={getDropdownOptions()}
...
/>
OR, instead of using a function, just set a variable:
const dropDownOptions = allProducts.find(
product => product.productId === rowInfo.productId
).packages;
return dropDownOptions;
return (
<SelectBox
options={dropDownOptions}
...
/>
)