title: Slick slider render slide multiple times in reactjs
body: <p>I am creating slick slider by using reactjs. Slider working fine but it renders slide multiple times. I am looping the slide using map function.</p>
  
  <p>screenshots:</p>
  
  <p><a href="https://i.stack.imgur.com/Nvu7m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nvu7m.png" alt="enter image description here"></a></p>
  
  <p>my scripts: </p>
  
  <pre><code>import React, {Component} from 'react';
  import Slider from "react-slick";
  import "slick-carousel/slick/slick.css";
  import "slick-carousel/slick/slick-theme.css";
  import '../css/Header.css';
  //import SlideItem from './SlideItem';
  class SliderSlick extends Component{
  
      shouldComponentUpdate () {
        // TODO: add proper implementation that compares objects
        return false;
      }
  
      render() {
  
         //Slide Items
          var sliderItem = ['slider1.jpg','slider2.jpg','slider3.jpg'];
  
          var settings = {
            autoplay: false,
            dots: true,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            speed: 1000,
  
          };
  
  
          return (
            &lt;div className="container"&gt;
            &lt;Slider {...settings}&gt;
              {
                sliderItem.map((item,index) =&gt; {
                  return (
                      &lt;div data-index={index} key={index}&gt;
                          &lt;img src={process.env.PUBLIC_URL + '/images/'+item} alt="Continental GT 650" /&gt;
                      &lt;/div&gt;
                  )
                })
              }
            &lt;/Slider&gt;
            &lt;/div&gt; 
          );
        }
  }
  
  export default SliderSlick;
  </code></pre>
  
  <p>what am I doing wrong?</p>