Issue with Rendering Tab Titles Using flowbite-react Library

[rafi-medimesh]

I am currently working on a project using the flowbite-react library to create tabs within a Reactjs application. While attempting to display tab titles dynamically using a map loop, I have encountered an issue where the titles are not showing.

Problem Description:

I have a Reactjs component where I conditionally render tabs based on the contentType. When contentType is set to "resources," I map over a content array and attempt to display tab titles and descriptions for each element in the array. However, I am experiencing difficulties with the titles not showing up.

Code Snippet:

{
  this.props.contentType === "resources" && (
    <Tabs.Group aria-label="Pills" style="pills">
      {this.props.content.map((el, i) => {
        return (
          <>
            <Tabs.Item className="Chinmoy" key={i} title={el.label}>
              <p className="">{el.description}</p>
            </Tabs.Item>
          </>
        );
      })}
    </Tabs.Group>
  );
}

Expectation:

I expect the titles to be displayed for each tab, with the el.label values from the content array being used as tab titles, while it works properly on the library documentation on a static jsx code, see here.

Actual Result:

However, the titles are not showing up as expected, and I cannot identify the root cause of this issue.

What I've Tried:

• I have confirmed that the el.label values in the content array are not empty or undefined.
• I've checked the library's documentation, but I couldn't find any specific guidance regarding this issue.

Screenshot:

[rluders]

@rafi-medimesh what happens if you remove the <></> that wraps the Tab.Item?

[rafi-medimesh]

@rluders then I will see an error says: (Adjacent JSX elements must be wrapped in an enclosing tag) anyway I changed it to div still not working.

[rluders]

@paghar do you mind taking a look into this one?
My best guess is that if there is a bug in the library it is here:

flowbite-react/src/components/Tab/Tabs.tsx

Lines 75 to 82 in aa6f7e2

	const tabs = useMemo(
	() =>
	Children.map(
	Children.toArray(children) as ReactElement<PropsWithChildren<TabItemProps>>[],
	({ props }) => props,
	),
	[children],
	);

[SutuSebastian]

@rafi-medimesh are u using NextJS (server components especially) or something else?

[rafi-medimesh]

@SutuSebastian The backend runs on Java Spring Boot, and you shouldn't encounter any problems, as long as there are no issues with the response object, right?. Just a friendly heads-up: it won't work with a static object too.

[SutuSebastian]

I see, then this needs more digging.

[rafi-medimesh]

For the moderators' attention: The issue on my end has been resolved as I have implemented my own tabs and pills. If you determine that it was a bug in the library, feel free to close the issue once resolved.

[rluders]

I think that we should confirm, but I think that it could be a bug.

[paghar]

@rafi-medimesh Could you pls provide the sample object you have used as data?

[SutuSebastian]

The issue here is that only the first level of children are cloned inside Tabs component and props are injected, in ur case it breaks because u are rendering a React.Fragment (or <> ... </>) and the props are injected into the React.Fragment instead of the Tabs.Item.

We need a new approach here, instead of injecting props through children clone, we need to use React.Context.

[rafi-medimesh]

@rafi-medimesh Could you pls provide the sample object you have used as data?

Apologies for the delay. Here's a sample of the object:

{resources: [
  {
    id: "123",
    type: "group_1",
    label: "General",
    description: "Lorem ipsum dolor sit ame et ea rebum. Stet clita kasd gubergren, no sea tak, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak",
    picture: "https://source.unsplash.com/random/600x340/?people",
  },

  {
    id: "123",
    type: "equipment",
    label: "General",
    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et k",
    picture: "https://source.unsplash.com/random/600x340/?laptop",
  },

  {
    id: "123",
    type: "tools",
    label: "General",
    description: "Lorem ipsum dolor consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et k",
    picture: "https://source.unsplash.com/random/600x340/?phone",
  },

  {
    id: "123",
    type: "Pharmac",
    label: "General",
    description: "Lorem ipsum dolor consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et k",
    picture: "https://source.unsplash.com/random/600x340/?headphone",
  },
]}

[tulup-conner]

Can you confirm that this is still an issue when you don't use a React Fragment as the parent element (<> and </>)?