[英]Rendering Arrays in React
i am trying to render the sub array as an individual item, but it keeps rendering all the sub array items inside one list `我试图将子数组渲染为一个单独的项目,但它一直在一个列表中渲染所有子数组项目`
const items = [
{ id: 1, header: "Global", lst: "All Fruits" },
{
id: 2,
header: "By Taste",
lst: ["sweet", "sour", "bitter"],
},
{
id: 3,
header: "By Region",
lst: [
"Tropical",
"dry",
"Continental",
"Temperate",
"Polar",
],
},
];
` `
` `
<ul className="dd-list">
{items.map((item) => (
<div key={item.id}>
<i>{item.header}</i>
<li className="dd-list-item">
<button
type="button"
onClick={(e) => {
setSelected(item.lst);
setOpen(false);
}}
>
{item.lst}
</button>
</li>
</div>
))}
</ul>
thanks in advance提前致谢
expected result预期结果
By Taste -sweet -sour -bitter By Region -Tropical -dry -Continental -Temperate -Polar按口味-甜 -酸 -苦按地区-热带 -干 -大陆 -温带 -极地
You should add inner list你应该添加内部列表
<ul className="dd-list">
{items.map((item) => (
<li key={item.id}>
<i>{item.header}</i>
<ul>
{item.lst.map((innerItem) => (
<li key={innerItem} className="dd-list-item">
<button
type="button"
onClick={(e) => {
setSelected(innerItem);
setOpen(false);
}}
>
{innerItem}
</button>
</li>
))}
</ul>
</li>
))}
</ul>
You need to iterate on the lst
items inside your items
.您需要迭代 items 中的
lst
items
。 I've noticed that the first object inside your items is not an array我注意到你的项目中的第一个 object 不是数组
const items = [
{ id: 1, header: "Global", lst: ["All Fruits"] },
{
id: 2,
header: "By Taste",
lst: ["sweet", "sour", "bitter"],
},
{
id: 3,
header: "By Region",
lst: [
"Tropical",
"dry",
"Continental",
"Temperate",
"Polar",
],
},
];
return <ul className="dd-list">
{items.map((item) => (
<li key={item.id}>
<i>{item.header}</i>
<ul>
{item.lst.map((innerLstItems,index) => (
<li className="dd-list-item" key={index}>
<button
type="button"
onClick={(e) => {
setSelected(innerLstItems);
setOpen(false);
}}
>
{innerItem}
</button>
</li>
))}
</ul>
</li>
))}
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.