无法映射 javaScript 中的对象数组

Not able to map array of objects in javaScript

如何将对象数组映射到我想要显示 Module1 及其子模块的位置?

const data = [
    {
        module1 : ["submod1", "submod2"]
    },
    {
        module2 : ["submod3", "submod4"] 
    }
]

我还想将“module1”及其数组作为 prop 传递给其他组件。

Expected Output

提取模块1:

const module1Array = data[0].module1.map(sm=> {
        return sm
    }
     );

获取新数组中的所有子模块数组:

const modulesArray = data.map(m => {
    return Object.values(m)[0];
})

为什么不直接将数据作为 prop 传递并在组件中对其进行映射? ->

const Example = (data) => {

    const modules = data.map(m => {
            return (
            <div>
            <h1>{Object.keys(m)}</h1>
            <p>{Object.values(m)}</p>
            </div>)
        })

     return (
            <div>
                {modules}
            </div>
        )
    }

export default Example