Search code examples
javascriptreactjsarray-mapconditional-rendering

React Conditional rendering mapping an array

I have reproduced my scenario in this codesandbox

I have an array of tags of 5 elements

const tagsList = ["Covid 19", "Business", "Energy", "Sport", "Politics"];

I am mapping for each tag my Chip component

  {tagsList.map((tag) => (
    <Chip label={tag} />
  ))}

I want to say that if the taglist length is bigger than 2 ( which is my case in the codesandbox ) to show me the chip with the tags left, which are 3 ( length - 2 ).

How can i make in the same map function? Is there an other way?

Solution

  • You can do this if you don't mind not starting at position 0:

    <div className={classes.root}>
      {(tagsList.length > 2 ? tagsList.slice(3, 5) : tagsList).map((tag) => (
        <Chip label={tag} />
      ))}
      {tagsList.length > 2 && <Chip label={tagsList.length - 2} /> }
</div>