1

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.

Zuzim
  • 75
  • 4
  • 12
  • 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
  • I would not add an setState inside a loop. – Cyrus Zei Feb 01 '22 at 18:35
  • 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
  • @CyrusZei Why not using a setter inside a loop? Is there any programmatical reason for avoiding it? – BairDev Jan 27 '23 at 11:10
  • @BairDev because every time you set the state you render. So when you are looping over 10 items in an array you are render it 10 times – Cyrus Zei Jan 28 '23 at 14:20
  • @CyrusZei True! I have additionally thought about unpredictable behavior, because the actual updating of the state happens asynchronously and combined with some priority checking algorithm. [For example](https://refine.dev/blog/common-usestate-mistakes-and-how-to-avoid/): *React doesn't update the state immediately [...]. Instead, React takes a snapshot of the current state and schedules this Update (+1) [...] However, while the scheduled Update is still in pending transition, the current state may be changed by something else [(in the loop!)].* – BairDev Feb 02 '23 at 15:12

2 Answers2

1

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]);
},[]);
Sonam Gupta
  • 363
  • 2
  • 11
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

Cyrus Zei
  • 2,589
  • 1
  • 27
  • 37