javascript - how to render data in vertical Tab

Question

I need to render data using React vertical tabs, I have given code which I have tried and also the data coming from API. I am not getting how to loop inside <TabPanel>. link for codesandbox https://codesandbox.io/s/jovial-darkness-qob1n?file=/src/tab.js

      <Tabs
                defaultTab="vertical-tab-one"
                vertical
                className="vertical-tabs"
              >
                <TabList>
                  {subProducts.map((subProduct, index) => (
                    <Tab>{subProduct.subProductName}</Tab>
                  ))}
                </TabList>
                {subProducts.map((subProduct, index) => (
                  <TabPanel className="tab-pane fade mt-4 show  ">
                    {subProduct.bookingDetails.map((attr, i) => (
                      <>
                        <table id="customers">
                          <tbody>
                            <tr>
                              <td>{attr.name}</td>
                              <td>{attr.value}</td>
                            </tr>
                          </tbody>
                        </table>
                      </>
                    ))}
                  </TabPanel>
                ))}
              </Tabs>

API output:

subProducts: [
        {
          bookingDetails: [
            {
              name: "Birthday Decoration",
              value: "YES"
            },
            {
              name: "Photographer",
              value: "NO"
            }
          ],
          subProductName: "Celebration"
        },
        {
          bookingDetails: [
            {
              name: "Decoration",
              value: "YES"
            },
            {
              name: "Video",
              value: "NO"
            }
          ],
          subProductName: "FamilY"
        }
      ]

question from:https://stackoverflow.com/questions/65862783/how-to-render-data-in-vertical-tab

Answer 1

In the sandbox you try to map over bookingDetails for each object in the subProducts array, but in the second object of subProducts you have a Details property, but not a bookingDetails property so bookingDetails will be undefined.

So you probably want to change Details to bookingDetails:

subProducts: [
  {
    bookingDetails: [
      {
        name: "Birthday Decoration",
        value: "YES",
      },
      {
        name: "Photographer",
        value: "NO",
      },
    ],
    subProductName: "Celebration",
  },
  {
    bookingDetails: [
      {
        name: "Decoration",
        value: "YES",
      },
      {
        name: "Video",
        value: "NO",
      },
    ],
    subProductName: "FamilY",
  },
];

If the API returns Details instead of bookingDetails as in your original question do it the other way around. Change it so it maps over Details instead:

So subProduct.Details.map instead of subProduct.bookingDetails.map.

---

The data not being displayed correctly on click is because each Tab component need to have a tabFor prop value that corresponds with a TabPanel's tabId prop value. Otherwise react-web-tabs doesn't know what content to show when.

For this example I've used the map's index and called toString on it before passing it to the props as the id needs to be a string. But a more natural id would be to have id fields in your data and use those.

Example Sandbox