英文:
how to use nested map function with bootstrap table?
问题
以下是翻译好的代码部分:
<tbody>
{
ListItems.map((section) =>
<tr key={section.id}>
<td>{section.name}</td>
</tr>
{
section.items.map((item) =>
<tr key={item.id}> // 这里出现了错误
<td>{item.productName}</td>
</tr>
)
}
)
}
</tbody>
请注意,这只是代码的翻译,不包括错误修复。如果您需要帮助解决代码中的错误,请提供更多上下文或错误信息,我会尽力提供帮助。
英文:
i am having an error with below code. it shows module build failed. I think the structure is missing some tag
<tbody>
{
ListItems.map((section) =>
<tr key={section.id}>
<td>{section.name}</td>
</tr>
{
section.items.map((item) =>
<tr key={item.id}> // the error is here
<td>{item.productName}</td>
</tr>
)})}
</tbody>
答案1
得分: 1
您需要使用正确的括号并将所有内容包装在片段中,如下所示。
```jsx
<tbody>
{
ListItems.map((section) => (
<Fragment key={section.id}>
<tr key={section.id}>
<td>{section.name}</td>
</tr>
{
section.items.map((item) => (
<tr key={item.id}>
<td>{item.productName}</td>
</tr>
))
}
</Fragment>
)
}
</tbody>
<details>
<summary>英文:</summary>
You need to use proper paranthesis and wrap everything inside fragment as follows.
<tbody>
{
ListItems.map((section) => (
<Fragment key={section.id}>
<tr key={section.id}>
<td>{section.name}</td>
</tr>
{
section.items.map((item) => (
<tr key={item.id}>
<td>{item.productName}</td>
</tr>
)
}
</Fragment>
)
}
</tbody>
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论