Using state hooks to conditionally update an array

Question

I want to add items to an array with the useState hook instead of doing array.push. This is the original code:

   let tags = []
      data.blog.posts.map(post => {
        post.frontmatter.tags.forEach(tag => {
          if (!tags.includes(tag)){
            tags.push(tag)
          }
        })
      })

This is one of several things I've tried with React:

const [tags, setTags] = useState([])
  
  data.blog.posts.map(post => {
    post.frontmatter.tags.map(tag => {
      if (!tags.includes(tag)){
        setTags(tags => [...tags, tag])
      }
    })
  })

The "tags" state variable does not receive anything in the above example.

I have looked at a variety of similar threads but the problems and solutions there are difficult to translate to this situation.

What is your end goal here? How does `data.blog.posts` relate to the state atom? Or `post.frontmatter.tags`? — AKX, Feb 01 '22 at 18:34
The goal is to conditionally add indices to the "tags" array from the "data.blog.posts" array. Each index in the post array has at least one tag - I only want to add it to "tags" if it has not already been added. — Zuzim, Feb 01 '22 at 18:41

score 1 · Accepted Answer · answered Feb 01 '22 at 19:14

You can try setting the tags state in initial render or on any event as per your requirement .

const [tags, setTags] = useState([]);

useEffect(()=>{
  const arr=[];
  data.blog.posts.map(post => {
    post.frontmatter.tags.map(tag => {
      if (!arr.includes(tag)){
        arr.push(tag)
      }
    })
  });
 setTags([...arr]);
},[]);

Cyrus Zei · Answer 2 · 2022-02-01T19:40:28.577

0

Ok, I did understand what you wanted to do.

Here is the code and I did add some commest and there is also a working code sandbox

so it will show the "tags" you have on your state and when you click on the button it will filter and add those tags that are missing

import React, { useState } from "react";

//mock data.blog.posts

const data = {
  blog: {
    posts: [
      {
        frontmatter: {
          tags: ["tag1", "tag2", "tag3"]
        }
      }
    ]
  }
};

const App = () => {
  const [tags, setTags] = useState(["tag1"]);

  const filterTags = () => {
    const myTags = ["tag1"];
    let result;
    data.blog.posts.map((post) => {
      // check what tags are not included in tag stateon line 18
      result = post.frontmatter.tags.filter((item) => !tags.includes(item));
    });
    // here it will show that 'tag2' and 'tag3' does not exist
    console.log("result", result);

    // here we are setting the state

    setTags((oldState) => [...oldState, ...result]);
  };

  return (
    <div className="App">
      <h1>My tags</h1>
      {tags.map((tag) => (
        <h4>{tag}</h4>
      ))}

      <button onClick={() => filterTags()}>add tags</button>
      <hr />
      <h1>My tags from posts</h1>
      {data.blog.posts.map((posts) => {
        return posts.frontmatter.tags.map((tag) => <div>{tag}</div>);
      })}
    </div>
  );
};

export default App;

and here is the codeSandBox

edited Feb 01 '22 at 19:40

answered Feb 01 '22 at 18:38

Cyrus Zei

2,396
1
21
35

This doesn't work. I think setTags() triggers a re-render every time and therefore I get an infinite loop. – Zuzim Feb 01 '22 at 18:55
Ok, I did not test that code. let me create an snippet – Cyrus Zei Feb 01 '22 at 19:05
ahh, now I see what you want to do. If the tag does not exist you want to add that tag. – Cyrus Zei Feb 01 '22 at 19:12
Yes that is correct! – Zuzim Feb 01 '22 at 19:13
there you go, hope this will help – Cyrus Zei Feb 01 '22 at 19:40
I believe Sonam Guptas solution was simpler. Thanks anyway! – Zuzim Feb 02 '22 at 15:03
no problem, you might want to read this post on why using setState inside of useEffect is not a good way to do it https://stackoverflow.com/a/54923969/2564673 – Cyrus Zei Feb 02 '22 at 19:19

Using state hooks to conditionally update an array

2 Answers2