Pick values to Component from array within array of objects

Question

The user has own list of tags and each item owned by the user can have multiple tags from this tag list.

Here I am trying to map all the users tags for one item and if the specific item has a tag from the userTag list then those tag Chip element should have a different style aqua coloured background.

I am struggling on finding a way to get the 'tag: array' values and implementing the Chip element style accordingly to multiple tags. Here I can only get the item.tag array for the first tag item.tag[0]. How would I go by when trying to get each value from the nested tag array inside itemsData and give the item multiple aqua coloured tags if it has multiple tags.

 const itemsData = [
 { id: 1, tag: ['Fysik', 'Matematik'] },
 { id: 2, tag: ['Analytics', 'Marketing', 'Data'] },
 { id: 3, tag: [''] },
 ];

<div>
  {userTags.map(tag => (
    <Chip
      label={tag}
      variant={item.tag[0] === tag ? 'default' : 'outlined'}
      onClick={() => { onTagSelected(tag, item.id); }}
    />
  ))}
</div>

C Lindsay · Accepted Answer · 2019-08-19 14:56:51Z

1

You could use Array.indexOf to determine whether it is in the item's tag array or not.

<div>
  {userTags.map(tag => (
    <Chip
      label={tag}
      variant={item.tag.indexOf(tag) > -1 ? 'default' : 'outlined'}
      onClick={() => { onTagSelected(tag, item.id); }}
    />
  ))}
</div>

answered Aug 19, 2019 at 14:56

C Lindsay

2091 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonas Wilms · Accepted Answer · 2019-08-19 14:57:52Z

1

You could check if some of the items tags includes the tag:

 itemsData.some(item => item.tag.includes(tag))

If you do that check more often on a large dataset it might be benefitial to build up a Set, then lookup is O(1):

 // Build up the Set once
 const highlightedTags = new Set(itemsData.flatMap(item => item.tag));

 // Then lookup:
 highlightedTags.has(tag)

answered Aug 19, 2019 at 14:57

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

1 Comment

Rohit Kashyap Over a year ago

Set seems overkill since the number of tags for an item wouldn't be a large dataset.

Rohit Kashyap · Accepted Answer · 2019-08-19 14:57:57Z

0

Try this:

 <div>
      {userTags.map(tag => (
        <Chip
          label={tag}
          variant={item.tag.includes(tag) ? 'default' : 'outlined'}
          onClick={() => { onTagSelected(tag, item.id); }}
        />
      ))}
    </div>

answered Aug 19, 2019 at 14:57

Rohit Kashyap

1,5922 gold badges11 silver badges16 bronze badges

Collectives™ on Stack Overflow

Pick values to Component from array within array of objects

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related