Warning: Each child in a list should have a unique "key" prop unable to debug where is shows exactly?

Question

In console shows this error. But where is exactly error occurs unable to track?

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `CustomArrows`. See https://reactjs.org/link/warning-keys for more information.
    at div
    at CustomArrows (http://localhost:3000/static/js/bundle.js:89771:5)
    at div
    at div
    at div
    at div
    at div
    at Home (http://localhost:3000/static/js/bundle.js:97055:9)
    at Route (http://localhost:3000/static/js/bundle.js:70064:29)
    at div
    at App (http://localhost:3000/static/js/bundle.js:87224:5)
    at Router (http://localhost:3000/static/js/bundle.js:69693:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:69299:35)

This is my whole code of component where Customarrows use in Slider Component. I use here react package as react-slick:

import React, { Component } from "react";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import classes from './photocarousel.css'
export default class CustomArrows extends Component {
  render() {
    function importAllCarouselImg(r) {
        let images = {};
        r.keys().map((item, index) => {
           images[index] = r(item); 
          });
          return images;
    }

    const carouselimages = importAllCarouselImg(require.context('../../assets/Images/carouselimages', false, /\.(png|jpe?g|svg)$/));
    const carouselArray = Object.entries(carouselimages).map(([key,value]) => {
      return <div><img src={value} className={classes.carouselimages} /></div>
   });

    
    return (
      <div>
        <Slider >
            
          {carouselArray}
        </Slider>
      </div>
    );
  }
}

Answer 1

Try this:

export default class CustomArrows extends Component {
  render() {
    function importAllCarouselImg(r) {
        let images = {};
        r.keys().map((item, index) => {
           images[index] = r(item); 
          });
          return images;
    }

    const carouselimages = importAllCarouselImg(require.context('../../assets/Images/carouselimages', false, /\.(png|jpe?g|svg)$/));
    return (
      <div>
        <Slider >
          {Object.entries(carouselimages).map(([key,value],i) => (
            <div key={i}><img src={value} className={classes.carouselimages} /></div>
          }))
        </Slider>
      </div>
    );
  }
}