how to use nested map function with bootstrap table?

Question

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>

Explorer · Answer 1 · 2023-07-10T10:56:48.157

1

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>

edited Jul 10 '23 at 10:56

answered Jul 10 '23 at 07:50

Explorer

45
12

I tried this. but i have key error – kishore kumar Jul 10 '23 at 08:02
Try this and also post the exact error. – Explorer Jul 10 '23 at 08:05
react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop. Check the render method of `PriceList`. See https://reactjs.org/link/warning-keys for more information. at PriceList at div at App – kishore kumar Jul 10 '23 at 08:10
This is a warning, means that items do not have unique id. – Explorer Jul 10 '23 at 09:20
1

i got a solution by adding instead of empty tag – kishore kumar Jul 10 '23 at 09:23

how to use nested map function with bootstrap table?

1 Answers1