3

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 inside hn

How can I avoid it?

xCTAPx
  • 119
  • 2
  • 10

0 Answers0