React Conditional rendering mapping an array

Question

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?

I'm not entirely clear on what you're asking for, but it sounds as though you want just a slice of your array. — George
– George, Commented Nov 10, 2020 at 18:55
When you say "left" you mean how to position them on the screen, or do you mean to show the first 3 elements ? — Gabriele Petrioli
– Gabriele Petrioli, Commented Nov 10, 2020 at 19:02
To show the first 3 elements and put an extra element with only the number 2 ( which are the tags left ) — Koala7
– Koala7, Commented Nov 10, 2020 at 19:04

Sarun UK · Accepted Answer · 2020-11-10 19:01:10Z

3

You can use tagsList.slice(2) if the list size is greater than 2.

export default function OutlinedChips() {
  const classes = useStyles();

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

  return (
    <div className={classes.root}>
      {(tagsList.length > 2 ? tagsList.slice(2) : tagsList).map((tag) => (
        <Chip label={tag} />
      ))}
    </div>
  );
}

Working code - https://codesandbox.io/s/material-demo-forked-31f2w?file=/demo.js

answered Nov 10, 2020 at 19:01

Sarun UK

6,7667 gold badges26 silver badges52 bronze badges

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

1 Comment

Koala7 Over a year ago

Almost perfect thanks, i have just edited tagsList.slice(0, 2) to show the first 2 elements and i need to show a Chip with the number of tags left ( 3 )

ImInYourCode · Accepted Answer · 2020-11-10 20:46:22Z

1

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>

edited Nov 10, 2020 at 20:46

answered Nov 10, 2020 at 19:25

ImInYourCode

6051 gold badge8 silver badges21 bronze badges

Comments

MarcSanchez · Accepted Answer · 2020-11-10 19:23:01Z

1

You can collect index (position of element in list) in the map function and act according to your needs, if I understand it wright mayby you could do something like this :

return (
    <div className={classes.root}>
      {/* Change to shortTagsList for check the shortest */}
      {tagsList.map((tag, index) => {
        let length = tagsList.length;
        console.log(length);
        return (
          (length > 2 && index > 2 && <Chip label={tag} />) ||
          (length <= 2 && <Chip label={tag} />)
        );
      })}
    </div>
  );

codesandbox

edited Nov 10, 2020 at 19:23

answered Nov 10, 2020 at 19:02

MarcSanchez

1013 bronze badges

Collectives™ on Stack Overflow

React Conditional rendering mapping an array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related