title: Avoid duplication in React array map function
body: <p>I am fetching some data in form of strings , and I would like to avoid any duplication when I map this array .
  This is how I am using this function in React :</p>
  <pre><code>&lt;Flex &gt;
        {allPrismicCollection.nodes.map((collection)=&gt;
        (
          &lt;Navbar&gt;
          &lt;NavTitle&gt;{collection.data.collection.text}&lt;/NavTitle&gt;
          &lt;NavbarFlex&gt;
          {collection.data.slides.map((coll)=&gt;
          &lt;&gt;
            {coll.slide.document.data.blogs.map((s)=&gt;
            &lt;&gt;
  
              {s.blog.document.data.tags.map((t)=&gt;
                (
                  &lt;NavLink&gt;&lt;Link to='#'&gt;{t.tag}&lt;/Link&gt;&lt;/NavLink&gt;
                )
              )}
              &lt;/&gt;
            )}
            &lt;/&gt;
          )}
          &lt;/NavbarFlex&gt;
        &lt;/Navbar&gt;
        )
        )}
      &lt;/Flex&gt;
  </code></pre>
  <p>This is the JSON format of the array , it contains multiple <code>blog</code> fields and each field has various <code>tags</code> fields .</p>
  <pre><code>&quot;blogs&quot;: [
                          {
                            &quot;blog&quot;: {
                              &quot;document&quot;: {
                                &quot;id&quot;: &quot;4a007c39-2053-5c5e-8f38-56ba8c3aced5&quot;,
                                &quot;data&quot;: {
                                  &quot;tags&quot;: [
                                    {
                                      &quot;tag&quot;: &quot;Entertainment&quot;
                                    },
                                    {
                                      &quot;tag&quot;: &quot;Happiness&quot;
                                    },
                                    {
                                      &quot;tag&quot;: &quot;Philosophy&quot;
                                    }
                                  ]
                                }
                              }
                            }
                          },
                          {
                            &quot;blog&quot;: {
                              &quot;document&quot;: {
                                &quot;id&quot;: &quot;9e78be5c-08e7-5684-adaa-b788cb4020b7&quot;,
                                &quot;data&quot;: {
                                  &quot;tags&quot;: [
                                    {
                                      &quot;tag&quot;: &quot;Life&quot;
                                    },
                                    {
                                      &quot;tag&quot;: &quot;Vacation&quot;
                                    },
                                    {
                                      &quot;tag&quot;: &quot;Drama&quot;
                                    }
                                  ]
                                }
                              }
                            }
                          }
                        ]
                      }
                    }
                  }
                },
  </code></pre>
  <p>When consoling <code>s.blog.document.data.tags</code> I get multiple arrays , I need to wrap them in a single array based on the collection name !
  the <code>t.tag</code> will return some duplicated values and I don't want it , how can I solve this please ?</p>