Avoid duplication in React array map function

Question

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 :

<Flex >
      {allPrismicCollection.nodes.map((collection)=>
      (
        <Navbar>
        <NavTitle>{collection.data.collection.text}</NavTitle>
        <NavbarFlex>
        {collection.data.slides.map((coll)=>
        <>
          {coll.slide.document.data.blogs.map((s)=>
          <>

            {s.blog.document.data.tags.map((t)=>
              (
                <NavLink><Link to='#'>{t.tag}</Link></NavLink>
              )
            )}
            </>
          )}
          </>
        )}
        </NavbarFlex>
      </Navbar>
      )
      )}
    </Flex>

This is the JSON format of the array , it contains multiple blog fields and each field has various tags fields .

"blogs": [
                        {
                          "blog": {
                            "document": {
                              "id": "4a007c39-2053-5c5e-8f38-56ba8c3aced5",
                              "data": {
                                "tags": [
                                  {
                                    "tag": "Entertainment"
                                  },
                                  {
                                    "tag": "Happiness"
                                  },
                                  {
                                    "tag": "Philosophy"
                                  }
                                ]
                              }
                            }
                          }
                        },
                        {
                          "blog": {
                            "document": {
                              "id": "9e78be5c-08e7-5684-adaa-b788cb4020b7",
                              "data": {
                                "tags": [
                                  {
                                    "tag": "Life"
                                  },
                                  {
                                    "tag": "Vacation"
                                  },
                                  {
                                    "tag": "Drama"
                                  }
                                ]
                              }
                            }
                          }
                        }
                      ]
                    }
                  }
                }
              },

When consoling s.blog.document.data.tags I get multiple arrays , I need to wrap them in a single array based on the collection name ! the t.tag will return some duplicated values and I don't want it , how can I solve this please ?

https://www.javascripttutorial.net/array/javascript-remove-duplicates-from-array/ — Joel Hager, Jun 21 '22 at 17:30
You can simply use a Set `{[...new Set(s.blog.document.data.tags)].map((t)=>` — pilchard, Jun 21 '22 at 18:02

score 1 · Answer 1 · answered Jun 21 '22 at 17:34

You can use a package named lodash installable via npm or yarn. Then import the uniq function to use.

E.g.

import { uniq } from 'lodash'

Your code should then look like this

{uniq(s.blog.document.data.tags).map((t)=>
          (
            <NavLink><Link to='#'>{t.tag}</Link></NavLink>
          )
        )}

If t is an object, like in your case then you will need to use uniqBy function instead.

import { uniqBy } from "lodash"

Then your code should be

{uniqBy(s.blog.document.data.tags, 'tag').map((t)=>
              (
                <NavLink><Link to='#'>{t.tag}</Link></NavLink>
              )
            )}

This didn't help ! But I appreciate your effort putting this code — Jaacoubi, Jun 21 '22 at 20:11

Avoid duplication in React array map function

1 Answers1