I have a parent component that contains a list of objects, objectList. Each of these objects has a property called component that contains a component for that object. Each object also contains other data such as title and icon
In the parent component's return statement, I map over objectList and show both title and icon. These have an onClick that, when used, executes a render function that renders the object.component - effectively generating the component onClick.
My issue is that I want to control the zIndex of these generated components such that the last one that is clicked has the highest zIndex. I have tried following the answer here, and after implementing it almost works.
My issue is that the zIndex variable contained within the parent does not increment when the function executes in the rendered children components. Based on console.log() I can tell that the function runs, and there are no discernible errors. But the "global variable" that the parent holds simply does not increment.
What complicates matters is that if I simply include one of the children component in the return statement of the parent (instead of rendering them onClick), then the zIndex variable actually increments, and everything works.
So my question is: How do I increment a variable in a parent component through a list of objects containing components as properties?
For further understanding, I illustrate the heritage of the objects below:
<Parent Component> => Object{title:"myTitle", icon:"image.png", component:<myComponent/>
Related
I am using Fluent UI DetailsList component.
I have a custom parent component that has a DetailsList component as a child component. This parent component is used in many places, and the items props passed to the DetailsList component are many and varied.
When using this parent component, I want to use the DetailsList's setkey property to retain the selection information even if an unexpected re-render occurs.
Even if this parent component is used in many places, would it be better to set the property value of setkey to a consistent string value?
Or is it more effective to reduce unexpected bugs or side-effects by using the setkey property value that combines the unique information of the delivered items props?
Also, is there another way other than using the setkey property value to maintain the selection information of the DetailsList?
For some reason, I have to implement a global Tooltip. Basically we have a global Tooltip component on a high level in react tree and whenever someone hovers overe certain elements the tooltip with the content of the hovered element shows up.
I do that from a Wrapper Component for the item where I need the tooltip, with the use of context. I even tried to provide 2 contexts, one for coordinates and content (of the tooltip/element) and one for setCoordinates and setContent. The values will be used in the tooltip itself and the setters in the Wrapper Component. I do this in order to avoid updates on all consumers of a context, but
Problem is, currently we are talking about a table with a list of items. Each item is wrapped with that Wrapper Component, therefore is connected to context (that provides only setCoordinates and setContent. Is there a way to stop all the elements in the list update when I interact only with one? Setting the Tooltip is trigger on hover, but when I hover over one element, I see all the others in dev tools updating.
TL;DR
Context is consumed by each element of an array. When hovering over one element I set the data in the Context with that element's content, it updates, but all it's brothers (items in the array which also consumes the Context) render again once. How can I stop them from doing that?
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 TabView component that has multiple tabs containing components. These components have entire hierarchies of other components. How could I know from any child component nested arbitrarily deep in one of these hierarchies whether or not it's parent tab is in focus in the TabView?
Preferably, I would want to implement this similar to react-navigation's withNavigationFocus (or an equivalent hook) so that any component can know if it's in tab focus without having to pass props down the chain of components. I'm thinking you could have a TabViewContext that components can register themselves as focus listeners to by doing a useContext. The TabViewContext would be provided by the TabView and the TabView would be responsible for determining what registered listeners are in focus when tabs change. My dilemma is I don't know how the TabView could determine efficiently what nested child components come into focus when the tab changes. Any ideas?
In case the other parent tabs are hidden, you could test for visibility in plain JS, rather than have a much more complex solution...
Checkout this answer on how to do this.
So components that care about the visibility of their parent tab could use a ref for their own DOM elements and test whether they're visible or not. You could build this into a simple helper function or a hook
EDIT:
I'd suggest going with something like this:
Each Tab will provide a context with method for any descendant to register a callback that will be called when the Tab is hidden. The TabView can pass a "isVisible" prop to each tab (if it doesn't already), so Tab can know when its display changes.
When a Tab changes from visible to hidden. All registered callbacks will be called.
I would of course write a hook or a helper function to create this TabVisibilty context so each Tab component can use it in a reusable manner.
I ended up in a quite awkward situation where I have to manually alter a React component before it get's rendered.
I'm using draft.js and have created a CompositeDecorator.
The decorator returns a react object that is styled just the way I want, but I need to replace the text of that component before I render it.
I can see that the object has a props property, that has a text property inside it. This is the text I want to change, but that property is readonly.
I can't do it the normal react way, since I don't control the part of the application that actually creates this component.
Are there any way to change this property, or to create a copy of this component that is an exact copy except for the text property?