I use @brainhubeu/react-carousel library for implementing carousel component in my App. Here is example of code:
export const Carousel = ({
options,
open,
onClose,
value,
onChange,
}: Props) => {
const [showSendWindow, setShowSendWindow] = useState<boolean>(false)
const handleCloseCarousel = useCallback(
(e: KeyboardEvent) => {
if (e.keyCode === 27) {
onClose(false)
}
},
[onClose],
)
useEffect(() => {
document.addEventListener('keydown', handleCloseCarousel)
return () => {
document.removeEventListener('keydown', handleCloseCarousel)
}
}, [handleCloseCarousel])
return open ? (
<Backdrop>
{showSendWindow && (
<SendFileModal onClose={() => setShowSendWindow(false)} />
)}
<SliderWrapper>
<Close onClick={() => onClose(false)}>
<Icon color='#FFFFFF' height={25} type='Cross' width={25} />
</Close>
<ImageCarousel
animationSpeed={0}
plugins={[
{
resolve: arrowsPlugin,
options: Arrows(options),
},
]}
value={value}
onChange={onChange}
>
{options.map((e, index) => (
<Wrapper key={index}>
<Image image={e.url}>
<Dropdown
overlay={() =>
FileDropdow(e.url, e.name, () => setShowSendWindow(true))
}
placement='bottomRight'
>
<Dots>•••</Dots>
</Dropdown>
</Image>
<Description>{e.comment}</Description>
</Wrapper>
))}
</ImageCarousel>
</SliderWrapper>
</Backdrop>
) : null
}
I found out that problem is in ImageCarousel component, because if delete it, then warning disappears, but Carousel doesn't work properly. I get next warning in console:
Warning: Cannot update a component (
Ne
) while rendering a different component (hn
). To locate the bad setState() call insidehn
How can I avoid it?