not support remove or add page dynamic? about react-pageflip HOT 6 OPEN

Hi.

I also catch this error in version 2.0.3, but my scenario slightly harder. I can remove and add pages without any problems, but when I try to remove and add pages at the same time the problem reproduced. It needed when the book has restrictions with blanc pages at the start and the end of the book. For example, I have restrictions:

• one blank page after the cover
• one blank page before the back cover
  In this case, I should check even/odd pages and when the count of pages is odd, I must add an additional blank page.

If I understand correctly it happened, because the count of pages doesn't change https://github.com/Nodlik/react-pageflip/blob/master/src/html-flip-book/index.tsx#L65 and method refreshOnPageDelete() doesn't call.

Do you have any ideas How I/We can fix it? I have only 2 ideas:

1. Automatical handling. The library will check is the count of pages is odd and is it add the blank page before back cover
2. Add property renderForcePagesChange or something like this

// something like this
if (!props.renderOnlyPageLengthChange || props.renderForcePagesChange || pages.length !== childList.length) {                    
  if (childList.length < pages.length || props.renderForcePagesChange) {                        
    refreshOnPageDelete();                    
  }
  setPages(childList);                
}

@Nodlik What do you think about it? I can prepare the pull request.

Thanks

from react-pageflip.

Try using the latest version. I hope I fixed it

from react-pageflip.

Yes it is partially supported.
But the children must be of the same type. Like here:

Also, please update StPageFlip to the latest version (0.4.3)

from react-pageflip.

If you put a button next to it that will perform setPages and insert the original array (for example), then there will be the same error as the author of the question

from react-pageflip.

I dug around in the code and it's caused by the library wrapping the pages into several other inner elements. React thinks the pages are the children of the div rendered in the HTMLFlipbook component but actually they are under the stf_wrapper and stf_block elements.

Unfortunately this is how far I've gotten. I don't know how to delete pages from the book though it would be important for some use cases. I might just move to vanilla JS though I started with React in the hope of easier DOM management.

from react-pageflip.

It looks like it's working now, I can add&remove pages without errors (though I am new to both React and Hooks and didn't know if I could make the changed HTMLFlipBook work in my class component so I spent a whole afternoon migrating to Hooks).

Thanks for the quick reply!

from react-pageflip.