How do I read from a list of components for each a value?
Unanswered
Barbary Lion posted this in #help-forum
Barbary LionOP
Hi everyone. New to react and nextjs.
I have the situation that I have a JSX.Element called rectangle. It's from konva-js and it has as a state the property position, which holds and object {x: number, y: number}.
I drag them around and on the onDragEnd event, I update the position and then I hand over the event to the callback function provided by the parent, so the parent also knows that
a drag ended. So far so good. This works, because every child possesses a label with its coords and I see those update.
Now, in the parent element, I do have a list of Rectangles (list of JSX.Element)
What I want to do right now is loop through them and use their coordinates for a calculation. Let's say to find the average coordinate.
When I just loop through them stupidly, they always have the coords with which I created them. I sometimes even have issues getting
an up-to-date list with all the current elements.
What is the canonical solution for accessing data from a list of children? I am at the moment trying forwardRef,
but still have some issues..
I have the situation that I have a JSX.Element called rectangle. It's from konva-js and it has as a state the property position, which holds and object {x: number, y: number}.
I drag them around and on the onDragEnd event, I update the position and then I hand over the event to the callback function provided by the parent, so the parent also knows that
a drag ended. So far so good. This works, because every child possesses a label with its coords and I see those update.
Now, in the parent element, I do have a list of Rectangles (list of JSX.Element)
What I want to do right now is loop through them and use their coordinates for a calculation. Let's say to find the average coordinate.
When I just loop through them stupidly, they always have the coords with which I created them. I sometimes even have issues getting
an up-to-date list with all the current elements.
What is the canonical solution for accessing data from a list of children? I am at the moment trying forwardRef,
but still have some issues..
1 Reply
Barbary LionOP
By the way, what I did was declare an object for the array of children with childrenRef and used they keys of the children and a callback to write the information in that object. That felt hacky... But it works. Is that anywhere close to the canonical solution?