react map 双重循环 嵌套循环

实现效果：

如图，数据是模拟后台输出的json，通过双重循环将数据放到侧边栏中

json数据如下

{
	"items":[
	{
		"item": "BeJson",
		"menuItem": ["menu1","menu2","menu3"]
	},
	{
		"item": "mary",
		"menuItem": ["menu1","menu2","menu3"]
	},
	{
		"item": "even",
		"menuItem": ["menu1","menu2","menu3"]
	}
	]
}

侧边栏组件如下

import React, { Component } from 'react';
import { Menu, Icon,Switch } from 'antd';
import data from './slidedata.json';
const list = data.items; 
const SubMenu = Menu.SubMenu;
class Slider extends Component{
    state = {
        theme: 'dark',
        current: '0',
      }
    
      changeTheme = (value) => {
        this.setState({
          theme: value ? 'dark' : 'light',
        });
      }
    
      handleClick = (e) => {
        console.log('click ', e);
        this.setState({
          current: e.key,
        });
      }
    
      render() {
        return (
          

            
            

            

            
            
              {
                  list.map(function(item,index){
                    return (
                        {item.item}}>
                        {
                             item.menuItem.map(function(item1,number){
                                 return (
                                     {item1}
                                 );
                            })
                        }
                         
                    );
                  }
                )
              }
            
          
        );
      }
}
export default Slider;