is mui select menuprops not applied to menu items returned from a method?

Although there is not much information about the props.options. But I will try to answer your question,

I think your menu items are being rendered before the actual props.options arrive. So, what you need to do is use useEffect and useState hook. const [menuItems, setMenuItems] = useState([]);

useEffect(() => {
    const updatedMenuItems: any = props.options?.map((option) => <MenuItem key={option.key} value={option.value}> {option.value} </MenuItem> );
    setMenuItems(updatedMenuItems);
}, [props.options]);

return (
    <FormControl>
       <Select
           MenuProps={{
              getContentAnchorEl: null,
              anchorOrigin: {
                  vertical: "bottom",
                  horizontal: "left"
                }
            }}
       >
            {menuItems}
       </Select>
    </FormControl>
)

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top