I am using ag grid in one my react applications. I am initializing my grid in one of the components and saving the gridApi on a state variable by useState inside onGridReady method.
The thing is, I want to access gridApi from some other components also. What's the best practice for it? For example, I am initializing my grid in X component and I want to access gridApi from Y component also. Currently I am storing the gridApi on redux and retrieving it from store whenever it's needed from other components. Is there any other better way to do it? Also is there any pitfall of storing gridApi in redux?
Thank you.
Since you're using React, there's a few approaches you can use to access the gridApi from other components. All three approaches work well, depending on your needs.
Prop Drilling
Let's say you have a parent component which has a grid component and another component as children components. You can define a state variable on the parent component, and then provide a callback to the grid component to set the state when the grid is initialised. Now that you have the gridApi in the parent, you can share it with the other child component by passing it as props. You can find the implementation of this in a stackoverflow question I answered which has the solution.
Global state (Redux)
I can see that you're currently using this method.
Context / useContext
Similar to the Redux approach, but instead keeping the gridApi using React Context
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 want to make some reusable components like modal, autocomplete, popover, etc. But I don t know which approach is better when is about the state
keep the state in redux - the disadvantage that I see in redux is that I must to create a reducer foreach place where I'm using the modal(example)
keep the state in parent component - the disadvantage is that when for example I press the button to open the modal will re render parent + children.
keep the state in the component - the disadvantage is that I must to pass everytime the button like props.
Which approach is better? I'm beginner I don't know if this is a dumb question to ask. Thanks!
I set my component to scale 1.2x when hovered over, however, when the component is re-rendered by React while I'm hovering over it, it loses the hover state for a moment and becomes small, then back to 1.2x, (see image). I want it to stay scaled. How can I work around this?
I had this same issue, and it turns out I was declaring a functional component within a different functional component (as a helper component). When the parent state changed, it re-created the internal component, causing the actual DOM to change.
Moving the internal component outside the main functional component fixed the issue.
So this was a problem because I subscribed the whole React render function to the Redux store, causing every action to force a re-render. This was fixed by using react-redux connect instead of subscribing the render function.
Create a flexbox component on the parent of this component and add the onHover function on it.
Try using react-redux's connect which doesn't re-render on every action.
Because , when you use subscribe the render function to the Redux store,
it causes the every action to forcefully re-render.
i like to develop a simple tooltip component in react.js
the tooltip gets defined like so in e.g. App.jsx:
<TooltipLink>Hover over me
<Tooltip>I am the Tooltip content</Tooltip>
</TooltipLink>
My question is: What is the best way of TooltipLink and Tooltip to talk to each other?
They are nested but I cannot use props because they are not nested directly in the component itself. Also, I don't want to use the parent (e.g. App.jsx) to manage the communication between TooltipLink and Tooltip because I want them to be self-contained.
I thought about refs but when i define a ref inside the Tooltip component then TooltipLink does not know about it (I assume because refs only work when components are nested inside the components themselves).
I could of course use simple DOM-programming for TooltipLink and Tooltip to communicate (e.g. use e.target when the user hovers over TooltipLink and then find its first child) but I thought there must be a more react-y way...
You have 3 options:
cascading props in the whole hierarchy
using redux
using the context API
I prefer to use redux, because the context API is not officially supported (breaking changes may happen, like in react 16.3). Cascading props is not really beautiful but may be convenient for small apps. (<MyComponent {...props}>)
I am using ag-grid for react and wanted to add my own props to the react component I am passing to fullWidthCellRendererFramework. Is there a way to do this?
Ok ag-grid provides a property called context from it's gridOptions. You can place both functions and props there.