Having trouble putting a <Tab> in a reusable function

Question

I'm attempting to create a tabs component and have been getting stumped.

The following example works as expected:

export default function ListOfTabs() {
  return(
    <Tabs>
      <Tab eventKey="home" title="Home">
        This be an example
      </Tab>
    </Tabs>
  )
} 

However, when I put the component into a reusable function like this:

function ReusableTabLink() {
  return(
    <Tab eventKey="home" title="Home">
      This be an example
    </Tab>
  )
}

And call it like so:

export default function ListOfTabs() {
  return(
      <Tabs>
        <ReusableTabLink />
      </Tabs>
  )
}

I see nothing displayed.

Answer 1

It looks like the implementation of Tabs in Bootstrap has very specific expectations for its use. :)

Basically, it is expecting the direct child to have the props it is looking for, and if it doesn't it won't work. I put together an example where I passed the props directly to your custom component and the tab shows up.

I'm guessing if you want to do this you'll need to utilize the custom tab layout mechanism within react-bootstrap. You could probably wrap that in your own Tabs component that would hopefully make more sense. :D

Here is an example from their docs:

<Tab.Container id="left-tabs-example" defaultActiveKey="first">
  <Row>
    <Col sm={3}>
      <Nav variant="pills" className="flex-column">
        <Nav.Item>
          <Nav.Link eventKey="first">Tab 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="second">Tab 2</Nav.Link>
        </Nav.Item>
      </Nav>
    </Col>
    <Col sm={9}>
      <Tab.Content>
        <Tab.Pane eventKey="first">
          <Sonnet />
        </Tab.Pane>
        <Tab.Pane eventKey="second">
          <Sonnet />
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>