Having trouble removing element from state array React/Typescript

Question

Hello I am having some trouble with removing items from selectedTags state array onClick. Please see the below react component:

TagPosts.tsx

interface Tag {
  id: string;
  name: string;
}

const TagPosts: React.FC= () => {

  let [tags, setTags] = useState<Tag[]>([]);

  let [selectedTags, setSelectedTags] = useState<Tag[]>([]);


  // STATE IS BEING UPDATED FINE WITH THE BELOW addToSelected FUNCTION

  const addToSelected = (tag: Tag) => {
    setSelectedTags([...selectedTags, tag]);
  };

  // HAVING ISSUE WITH REMOVING ITEMS FROM SELECTED ARRAY. STATE IS NOT BEING UPDATED WITH THE BELOW FUNCTION

  const removeFromSelected = (tag: Tag) => {
    const index = selectedTags.indexOf(tag);
    const newSelectedTags = selectedTags;
    newSelectedTags.splice(index, 1);
    setSelectedTags(newSelectedTags);
  };

  const renderTags = tags.map((tag) => {
    if (!selectedTags.includes(tag)) {
      return (
        <StyledTagBox key={tag.id} onClick={() => addToSelected(tag)}>
          <Typography variant="displayTags">{tag.name}</Typography>
        </StyledTagBox>
      );
    } else if (selectedTags.includes(tag)) {
      return (
        <SelectedTagBox key={tag.id} onClick={() => removeFromSelected(tag)}>
          <Typography variant="displayTags" color="#fff">
            {tag.name}
          </Typography>
        </SelectedTagBox>
      );
    }
  });


export default TagPosts;

Can anyone spot the bug? The weird thing is that when i console.log the newSelectedTags variable it is showing the desired array but the setSelectedTags function in the line right after is not executing?

Any help would be greatly appreciated. Thanks!

Shallow copy your state: const newSelectedTags = [...selectedTags]; — k.tten
– k.tten, Commented Nov 10, 2022 at 17:05

Nick Vu · Accepted Answer · 2022-11-10 17:18:04Z

2

React's state is immutable, and only checks reference equality.

The problem with your code is splice does not change the state reference.

You can use filter which is very common in React's array update. It will do 2 things:

Remove items according to your condition
Create a new array that makes React understand state update

  const removeFromSelected = (tag: Tag) => {
    const newSelectedTags = selectedTags.filter(currentTag => currentTag !== tag);
    setSelectedTags(newSelectedTags);
  };

answered Nov 10, 2022 at 17:18

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

1 Comment

Ryan Wheale Over a year ago

This is the best way: it uses filter to both remove the item AND return a new array.

SnNeposis · Accepted Answer · 2022-11-10 17:18:47Z

1

Ah I had this problem plenty of times. The issue is with the rendering of the state.

Since you are copying selectedTags directly using const newSelectedTags = selectedTags;, the state hook thinks that nothing has changed. It is a very annoying feature but should be solved if you instead do something like:

newSelectedTags = [...selectedTags]

(A shallow copy as caTS suggested)

edited Nov 10, 2022 at 17:18

answered Nov 10, 2022 at 17:08

SnNeposis

693 bronze badges

Collectives™ on Stack Overflow

Having trouble removing element from state array React/Typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related