Click here to Skip to main content
15,041,525 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am appending a text element in DOM using d3, the function will be something like this
someElement.append('text')
                    .text('x')
                    .on('click', function (d: ITag) {
                        const tagToRemove = find(tags, (tag: ITag) => {
                            return d.index=== tags.index;
                        });
                        removeTag(tagToRemove);//this will remove the passed tagToRemove from tags
                    })

here
tags
is a react state variable of type
ITag[]
, its part of the react functional component.

while DOM loading it adds multiple tags using same above code, then on clicking on each tag needs to remove that specific tag.
problem is that say I added 5 tags, and trying to remove the 2nd tag, which triggers this on click function, but the tags state variable in this on click function showing only the first two tags.
instead of 2nd one if i click the 4th one it shows first four tags.
So instead of using the latest tags its somehow storing the tags available at the time of this element creation and processing that old data only.
i want it to take the latest tags value and process it.

What I have tried:

Tried to destruct the state and pass, move this d3 into separate typescript module and pass this tags to that module, still its considering the tags from their appending time only, not the latest.
Posted
Updated 18-Mar-21 8:07am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900