[英]Map inside a map to get subarray
I have the following data:我有以下数据:
{
"data": {
"site": {
"siteMetadata": {
"siteLinks": [
{
"title": "title 1",
"submenu": [
{
"title": "test-1",
}
]
},
{
"title": "title 2",
"submenu": [
{
"title": "test-2",
}
]
},
{
"title": "title-3",
"submenu": [
{
"title": "test-3",
}
]
},
{
"title": "title-4",
"submenu": [
{
"title": "test-4",
}
]
}
]
}
}
} } } }
and I am trying to map to get the submenu title.我正在尝试映射以获取子菜单标题。 I have managed to get the first title working with the following code but I am struggling to get the map inside a map.
我已经设法使用以下代码获得第一个标题,但我正在努力将地图放入地图中。
import React from "react"
const Header = props => (
<div>
{props.siteLinks.map((item, key) => (
<div>
<li key={item.title}>{item.title}</li>
</div>
))}
</div>
)
export default Header
Any help would be much appreciated任何帮助将非常感激
You can add second map function inside a first one您可以在第一个地图函数中添加第二个地图函数
import React from 'react';
const Header = props => (
<div>
{props.siteLinks.map((item, key) => (
<div key={item.title}>
<li>{item.title}</li>
{item.submenu.map((x)=>(
<li key={x.title}>{x.title}</li>
))}
</div>
))}
</div>
)
export default Header;
const Header = props => ( <div> {props.siteLinks.map((item, key) => ( <div key={`${item.title}-${key}`}> <h4>{item.title}</h4> {item.submenu && item.submenu.map((subitem, i) => ( <li key={`${item.title}-${key}-${i}`}>{subitem.title}</li> ))} </div> ))} </div> ); const res = { data: { site: { siteMetadata: { siteLinks: [ { title: "title 1", submenu: [ { title: "test-1" } ] }, { title: "title 2", submenu: [ { title: "test-2" } ] }, { title: "title-3", submenu: [ { title: "test-3" } ] }, { title: "title-4", } ] } } } }; ReactDOM.render( <Header siteLinks={res.data.site.siteMetadata.siteLinks} />, document.getElementById("root") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
Something like this should work, just take the nested array and re-map its output again.这样的事情应该可行,只需获取嵌套数组并再次重新映射其输出即可。 I'd recommend using a unique key for each, rather than the title.
我建议为每个使用唯一的键,而不是标题。
import React from 'react';
import uuid from 'uuidv4';
const Header = props => (
<div>
{props.siteLinks.map((item, key) => (
<div>
<li key={uuid()}>
<h2>{item.title}</h2>
{item.submenu.map(subitem => (
<p key={uuid()}>{subitem.title}</p>
))}
</li>
</div>
))}
</div>
);
export default Header;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.