Our UI designer designed a Tabs component in React. When you select a tab it selects a child to render based on index and only 1 child is rendered at once.
I want to invoke some function calls in child when the Tab becomes active. But componentDidMount is not called.
When the page is first loaded, the initial tabs componentDidMount gets called, but others wont. I guess its because they dont get rendered. But now when i switch to the other tab, it gets rendered but componentDidMount is not called.
So eventhoguh componentDidMount is defined, it never gets called, unless its the initial open tab. How can i make so that switching tabs also invokes the componentDidMount code?
<Tabs><Tab><MyTable/></Tab><Tab><MyTable2/></Tab></Tabs>
MyTable2 has componentDidMount that invokes data loading. But the componentDidMount is never invoked.
Tabs element just renders its children
<div>this.props.children[index]<div/>
And Tab element does same
<div>this.props.children<div/>
You can use componentDidUpdate if you want to do something after props/state changed.
Related
I'm an embedded developer who is new to React and am struggling a bit with the behaviour of child components and nested child components.
I understand that for any component to be re-rendered, the state must change. I am using an example of a menu component that has an item component within. When some global level event happens, I want to change the text displayed by the item components.
Here is a fiddle that shows some code that I would expect to work:
https://codesandbox.io/s/dark-rain-8mfsp?file=/src/App.tsx
On clicking the div, the menu's setText function gets called, which calls into the item component, setting the state. This state is used in the render function of the item component, so I would expect both item and menu to be re-rendered.
Instead I get an error saying that I can't set the state of an object that hasn't yet been mounted. I would have thought it had been mounted..
Perhaps the way I have linked the declared components with those in the render functions by calling this.componentname.render() is the issue - but how else could that be done?
Thanks in advance!
Here is a working version of your sandbox.
https://codesandbox.io/s/lucid-bird-qecj0?file=/src/App.tsx:0-899
I see that you are new to react. I would suggest you use hooks instead of class components.
I have a component with children. I would like these to be shown or not depending on the press of a button. I can do this by creating a state variable childrenVisible, and then rendering or not depending on it.
But I have noticed that if I have state on a child Component it will get reset when toggling childrenVisible. I think this is because components gets destroyed when not rendered on a re-render.
I would like to keep the elements around, so I can keep their state, but just hide them depending on childrenVisible. Is this possible in React?
Does a modal (as seen in this example https://react-bootstrap.github.io/components/modal/) force a re-render of everything inside the return statement, or not?
After profiling the render, I confirmed that this sort of modal DOES force a re-render of everything inside the return statement.
Because ReactDOM.createPortal is used internally by the modal, it should be attached to whatever component is causing it to render.
A friend of mine is recreating this TV shows guide with React.
Right now he has a prop like moveScrollPosition that handles the scroll when you move the hour scroll. It passes down the prop and moves the guide of the TV shows. The problem comes when you move the programs and it calls the same prop. The programs position moves AND calls the prop to move the guide. There is an infinite loop there, since the hour scroll calls the prop to move the TV shows.
Should he use Redux to store a global scroll position outside? This way both the hour scroll and the TV Shows scroll will call the action and update the scroll position. The TV Shows won't call the same prop, just rely on the prop from Redux as wel as the hour scroll.
To clarify:
1) Hour selector --> Props --> TV Shows
2) TV Shows --> Props --> Hour scroll --> Props --> TV Shows --> loop
Regards.
It doesn't necessarily have to be redux.
In general you need some parent component maintaing the state (scroll position) that would be passed to children as props. It would also need a function to update the scroll position. This function would also be passed as prop to both child components. Whenever child components update the scroll, parent component will have state updated and will pass new value as props to children.
Generally, you need to implements guards to prevent async calls to the backend.
If u call the backend in a componentDidMount or componentWillReceiveProps you may get a rerender when the result comes in, this can lead to a new call to that async method. If there is no guard, you may go into an endless loop.
I'm new to react and I am trying to get my head around the code in ReactTransitionGroup and I am confused as to Why performEnter is called in componentDidUpdate and not componentDidMount. My understanding of componentDidUpdate is that it is called after render and when the state has altered.
So I'm confused as to why it is called here.
performEnter animates the child, and children are animated in and out when they appear in or disappear from the parent component on subsequent renders—they're not animated if they're already contained in the parent upon the first render.