KeyDown EventHandler for document in typescript react

Viewed 170

I am relatively new to typescript in react. According to typescript the following cannot be compiled due to incorrect event handler type - React.KeyboardEventHandler. As I am beginner with typescript, I have no clue what's wrong with this. Could you hint me, how can I get this thing working.

  useEffect(() => {
    const resetHeight: () => void = () => setHeight(window.innerHeight)
    if(!isMobile){
      document.addEventListener('keydown', handlePageChangeByClicking)
    }
    window.addEventListener('resize', resetHeight)
    return () => {
      window.removeEventListener('resize', resetHeight)
      if(!isMobile){
        document.removeEventListener('keydown', handlePageChangeByClicking)
      }
    }
  })

  const handlePageChangeByClicking: React.KeyboardEventHandler<HTMLDocument> = (e) => {
    if(e.keyCode === 38){
      if(current > 0)
        setCurrent(current - 1)
    } else if (e.keyCode === 40){
      if(current < maxSlides - 1)
        setCurrent(current + 1)
    }
  } 
0 Answers
Related