akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.72k stars 2.1k forks source link

Encountered two children with the same key warning #2117

Open ErezKatsman opened 2 years ago

ErezKatsman commented 2 years ago

Hey, at first I want to say that I just found this lib and I want to say that it made easier life for me => so thank you a lot.

second I'm having an issue right now.

Here is the error log: Warning: Encountered two children with the same key, `original4`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

here is my code snippet:

import React from "react";
import Slider from "react-slick";

export default function Types({ typeList, setName }) {
  if (typeList.length === 0) return <div>empty type</div>;
  const settings = {
    dots: true,
    infinite: true,
    centerPadding: "60px",
    slidesToShow: 3,
    speed: 500,
    rows: 2,
    slidesPerRow: 2,
    autoplay: true,
    autoplaySpeed: 2000,
    pauseOnHover: true,
    arrows: false,
    lazyLoad: true,
  };
  return (
    <div className="collection">
      <Slider {...settings}>
        {typeList.map((p, i) => (
          <div key={i}>
            <img
              src={p.photo}
              onClick={() => {
                setName(p.name);
              }}
            />
          </div>
        ))}
      </Slider>
    </div>
  );
}

Thanks

javialbors commented 9 months ago

Having the same issue