TypeError _this2.flipBook.getPageFlip is not a function

Question

I used to use react-pageflip on Reactjs exactly like the code below and it worked fine. When I copied the same component, I got this error in the nextjs project.

error:

TypeError: _this2.flipBook.getPageFlip is not a function

code:

import HTMLFlipBook from "react-pageflip";

class Book extends Component {
...

 onFlip(data) {
         this.setState({ page : data});
     }
  nextButtonClick = () => {
         this.flipBook.getPageFlip().flipNext();
       };
     
   prevButtonClick = () => {
         this.flipBook.getPageFlip().flipPrev();
       };

rendr(){

return(


<HTMLFlipBook  maxShadowOpacity={1} mobileScrollSupport={true} 
              className="demo-book"
              drawShadow={true}
              onFlip={(e) => this.onFlip(e.data)}
              changeOrientation="portrait"
              ref={(el) => (this.flipBook = el)}
 > 
 
<div classname={page1}>
  page1
</div>
<div classname={page2}>
  page2
</div>
</HTMLFlipBook>


)
}

Answer 1

this.flipBook.getPageFlip().flipNext(); in the block inside the nextButtonClick and prevButtonClick functions, you should use this.flipBook.pageFlip().flipNext() by flipping. It worked for me, I hope it works for you too.

    nextButtonClick = () => {
    this.flipBook.pageFlip().flipNext()
  };



prevButtonClick = () => {
    this.flipBook.pageFlip().flipPrev();
  };