Tengo una serie de controles deslizantes en una página y tengo un requisito específico que requiere agregar un relleno al control deslizante cuando no hay elementos debajo de su índice 0. Ya lo hice, pero no puedo entender cómo hacer que esta función afecte solo el control deslizante en el que estoy haciendo clic. En este momento, afecta a todos los controles deslizantes en mi función de mapa.

Estoy usando react-elastic-carousel y estoy apuntando a accesorios específicos, por lo que las funciones se ven así

 const onPrevStart = (prevItemObject, nextItemObject) => { if (nextItemObject?.index === 0) { setFirst(true); } }; const onNextStart = (prevItemObject, nextItemObject) => { if (nextItemObject?.index !== 0) { setFirst(false); } };

entonces lo llamo en una función de mi mapa en el JSX como este

 <div className="App"> {items.map((item, index) => ( <div key={index} className="carousel-wrapper" style={{ backgroundColor: "maroon" }}> <div> <Carousel breakPoints={breakPoints} renderArrow={renderArrows} //see the codesandbox to see these onPrevStart={onPrevStart} //here onNextStart={onNextStart} //and here style={{ backgroundColor: "white" }}> {item.itemdata.map((slide, index) => ( <Item key={index}>{slide}</Item> ))} </Carousel> </div> </div> ))} </div>

Si miras en mi caja de códigos que he creado para que juegues, puedes probar la funcionalidad y ver a qué me refiero.

Gracias por adelantado