Search code examples
reactjsreact-bootstrap

Unmounting tab component in react bootstrap tabs

Is there any way to unmount a tab component and mount only the active class to make api request on mounting

Solution

  • You can use mountOnEnter="true" and unmountOnExit="true" so it will remove and add to the DOM the component when selecting the tab:

    <Tabs
  className="mb-3"
  defaultActiveKey="A"
  mountOnEnter={true} <-- this
  unmountOnExit={true} <--- and this
>
  <Tab eventKey="A" title="A">
    <A/>
  </Tab>
  <Tab eventKey="B" title="B">
    <B/>
  </Tab>
  <Tab eventKey="C" title="C">
    <C/>
  </Tab>
</Tabs>