I have a parent child that looks like
<SelectedPaginator>
<DisplayComponent/>
</SelectedPaginator>
It turns out that <DisplayComponent/> has information that needs to be retrieved so that <SelectedPaginator> can render properly. So I set up a callback that I assign to a property so that <DisplayComponent/> can share this information. When the callback is made I save the information passed in state of the 'parent' component (in this case <SelectedPaginator>). The problem that I am running into is that when I set the state (using the useState hook) I get an exception that I am not able to update a component while another is rendering. How do I successfully setState in the parent without interfering with the rendering of the child? Or how do I find out what is currently being rendered so I can focus on the error? I am currently using useEffect to control the timing of the call.
Related
Child components renders in loop, but when dispatching an action addcomment or list comments action it re renders all child components instead of selected one.
See video of issue...
https://www.awesomescreenshot.com/video/6662865?key=13c71c93a5a75039da0a386f4d6b347e
see child component code: https://jsitor.com/4Q_ulWOXl
Although it is hard to understand from shared code. Looks like you are rendering Post Component in a loop. Can you check if the following are correct?
Each Post component rendered inside loop has unique key associated with it.
Check if comments added are changed in the particular post matching with payload id.
It can be the case in your reducer you are mapping through every post and updating with current value.
lHello everyone, here is the problem.
We have a grid component with some filtering enabled. When the filtering is applied, if a certain callback-prop exists, it is called with the filtered data as an argument.
The problem is this. If said datagrid is wrapped by a parent component and the parent component saves the filtered data in it's state, it causes the parent to rerender, but also the datagrid. However, when the datagrid renders it runs it's filtering logic, which causes the callback(which is setState() call) to run.
So, to avoid the loop I introduced a variable to the parent component class and save the data there, but it doesn't seem so good to me.
Another option would be redux, just add a new action and dispatch it when the filtering runs.
Any other ideas?
Since you're also asking for other ideas, may I suggest React hooks. They allow finer-grained control, such as multiple states, reducers, memoized callbacks, effects that are only called when inputs change, etc.
In suite of React apps we're placing per view set of reusable apollo-backed form components with just one save button placed outside of the form components. On a save button clicked each component (with dirty state) should execute the mutation to persist changes.
I wonder about possible implementation options and I would like to avoid using refs.
The problem to be solved seems to be - how to call a method outside of the component - I tried to follow on this question Call child method from parent and while I'd rather do not use any React way of communication between components, one particular answer that looks promising to me is https://stackoverflow.com/a/45582558/3021889 - still I'd like to hear what options do I have.
A select element within a React.js component takes 2 clicks to update in Firefox, but updates correctly on first click in Chrome and Safari.
It's a component using Redux + React-Redux and the value of the select element is dictated by a store value passed to it via mapStateToProps.
React Devtools shows the value of the select element updating correctly but the DOM itself doesn't update on the first click.
Redux Devtools is showing the correct actions being passed and correct state changes being made.
I've created a isolated recreation of the component tree in CodeSandbox (it functions correctly here so not a lot of help): https://codesandbox.io/s/jl7rpw3635
Here's a gif of the problem
Thanks in advance!
I ended up solving this issue by modifying the select component to render its options on mount, then attach them to a class property, avoiding re-rendering each option again every time the select component updates (they never change so it probably makes sense to do this) - https://codesandbox.io/s/m7m2qqp9py
I already saw a similar question from someone else here and the answer is pretty clear. Yet, if you're working with in a redux container, the states turn into props through the mapStateToProps function.
How is it then correct to proceed if I want e.g. my text-div to turn into an input, when I click or double-click on it? I don't have any code yet, I'm wondering about the theory.
The components get store state data passed in as props, but they can also have their own state. So in your case, your component would use it's own state to handle the toggling of div to input. If for some reason you wanted it to be saved in the store instead, you would fire off an action to toggle the view and then use the prop from the store in your render method.