How to check if state variable has been changed

Question

I have been trying to figure this out for awhile but basically I have a list of tags with

tags with onClick properties that should change a state variable postsShown to true. Tricky thing is the postsShown is supposed to be an array of boolean values and uses the index to differentiate which

tag was clicked. Now the state variable does update but gets stuck and does not get detected by my conditional statement. this is my code, I have tried calling the setState function with a callback but get an error

Tomer Almog · Accepted Answer · 2022-02-27 04:21:53Z

2

Your onClick event is not changing the object just the content inside the object. Since the pointer to the object didn't change React will not re-redner your component.

change your onClick function:

onClick={()=>{
  const postsClone = [...postsShown];
  postsClone[index]= true;
  setPostsShown(postsClone);
}}

[...postsShown] will create a new reference by copying the top level of the object.

If you need to create a deep copy use

const postsClone = JSON.parse(JSON.stringify(postsShown));

edited Feb 27, 2022 at 4:21

answered Feb 26, 2022 at 22:40

Tomer Almog

3,8783 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

terpinmd Over a year ago

[...postsShown] will create a new reference but not a deep copy....just a deep copy of the top most level.

Zechariah Dominguez Over a year ago

Thank you this worked. This has been bugging me for awhile.

Collectives™ on Stack Overflow

How to check if state variable has been changed

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related