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.

Answer 1

Try something like this. I would not add a setState inside a loop since you will trigger a regender every time you add something to it.

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

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

Answer 2

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]);
},[]);