react-bootstrap doesn't update states inside its Tab.Pane

user_4667153 0
Viewed 431

If state is being passed to a component as props, and the component is inside a Tab.Pane, when the state changes it won't update its props.

It works only if I programmatically switch tab back and forth with a setTimeout of 250 (or manually obviously), which means the tab needs to be switched again to re-render the component (therefore get the updated state)

Strangely enough it's the same thing if instead of a state I use a store system as redux to pass the prop to the component.

I also tried to add mountOnEnter={true} unmountOnExit={true} to the Pane which btw are already set to the Tab.Container wrapping everything inside, but doesn't make any difference.

Steps to reproduce the behavior:

  1. Create a useState or a state store of some sort
  2. Assign it to a component as prop
  3. Place the component inside a react-bootstrap Tab.Pane
  4. Try to change the state
  5. The component won't reflect the updated state/store

Version of react-bootstrap used: "react-bootstrap": "^1.5.0"

example of my Tab.Pane:

<Tab.Pane eventKey="items">
   <ItemsList items={data} />
</Tab.Pane>
react-bootstrap reactjs
1 Answers

Please try to wrap your tabpane code inside the useMemo hook and add the state which you're passing as a prop in dependency and try. This code will simply re-render your component whenever the state changes.

useMemo(() => 
    <Tab.Pane eventKey="items">
       <ItemsList items={data} />
    </Tab.Pane>, 
    [state]
)
user_108257970
Related