How can I not display elements that are repeated?

216 views Asked by At

How can I not display elements that are repeated? (react-slick slider)

The problem is that the items are duplicate, how do I fix this? Honestly, no thoughts come at all, please tell me

const titles = [
  {
    title: "iPhone"
  },
  {
    title: "Samsung"
  },
  {
    title: "Xiaomi"
  },
  {
    title: "Sony"
  },
  {
    title: "Lg"
  }
];   

<Slider variableWidth>
   {titles.map((el) => {
      return (
        <div className="tab__box">
           <div className="tab">{el.title}</div>
        </div>
      );
   })}
 </Slider>

enter image description here

2

There are 2 answers

0
Priyanka Panjabi On

Use infinite property like:

 <Slider variableWidth {...{infinite: false}}>
  {titles.map((el) => {
    return (
      <div className="tab__box">
        <div className="tab">{el.title}</div>
      </div>
    );
  })}
</Slider>
1
Sachin Vishwakarma On

you can use Set method which will give you unique array.

let uniqueTitles = [...new Set(titles)];