React How to render nested dropdown list in a form from a json data?

I would use ant design cascader for such a big data set. https://ant.design/components/cascader/ There are different components you can use and you don't need a recursion just pass your json as options. Sample usage:

import { Cascader } from 'antd';const options = [  {    value: 'zhejiang',    label: 'Zhejiang',    children: [      {        value: 'hangzhou',        label: 'Hangzhou',        children: [          {            value: 'xihu',            label: 'West Lake',          },        ],      },    ],  },  {    value: 'jiangsu',    label: 'Jiangsu',    children: [      {        value: 'nanjing',        label: 'Nanjing',        children: [          {            value: 'zhonghuamen',            label: 'Zhong Hua Men',          },        ],      },    ],  },];function onChange(value) {  console.log(value);}ReactDOM.render(  <Cascader options={options} onChange={onChange} placeholder="Please select" />,  mountNode,);

If you want to do nested lists, MenuItem is not the right component for this.

It's using the li tag as a base and this is why you're getting this warning.

I suggest you use an external package for this, material-ui-nested-menu-item, created exactly for this.

All you have to do is to replace MenuItem by its default NestedMenuItem component, wrap them with a Menu container and use the container ref:

<Menu  open={!!menuPosition}  onClose={() => setMenuPosition(null)}  anchorReference="anchorPosition"  anchorPosition={menuPosition}>  <MenuItem onClick={handleItemClick}>Button 1</MenuItem>  <MenuItem onClick={handleItemClick}>Button 2</MenuItem>  <NestedMenuItem    label="Button 3"    parentMenuOpen={!!menuPosition}    onClick={handleItemClick}  >    <MenuItem onClick={handleItemClick}>Sub-Button 1</MenuItem>    <MenuItem onClick={handleItemClick}>Sub-Button 2</MenuItem>    <NestedMenuItem      label="Sub-Button 3"      parentMenuOpen={!!menuPosition}      onClick={handleItemClick}    >      <MenuItem onClick={handleItemClick}>Sub-Sub-Button 1</MenuItem>      <MenuItem onClick={handleItemClick}>Sub-Sub-Button 2</MenuItem>    </NestedMenuItem>  </NestedMenuItem>  <MenuItem onClick={handleItemClick}>Button 4</MenuItem>  <NestedMenuItem    label="Button 5"    parentMenuOpen={!!menuPosition}    onClick={handleItemClick}  >    <MenuItem onClick={handleItemClick}>Sub-Button 1</MenuItem>    <MenuItem onClick={handleItemClick}>Sub-Button 2</MenuItem>  </NestedMenuItem></Menu>

Click here to see a CodeSandbox of its usage.

Another solution would be to make MenuItem use a different tag as base by providing the component prop.

If you pass component="div" to the MenuItem component, the error that you faced would be removed. sandbox

<MenuItem              onClick={() => console.log(123)}              component="div"              key={i.value}              value={i.value}            >