No flip animation each page is rendering independantly

[ZofSlytherin]

i am fetching a list of document from an api and its an array of object each object contains url key with s3 bucket url as value
below code is rendering files but each page and pdf is rendering separately thus making page flip animation not working
i think it is because of pagnumber calculation please provide support

{filteredData.map((item, index) => { return ( <Document key={index} file={item.url}> <HTMLFlipBook width={width} height={height}> <Page pageNumber={1} /> </HTMLFlipBook> </Document> ); })}

[ZofSlytherin]

const Page = React.forwardRef(({ pageNumber }, ref) => { return ( <div ref={ref} data-density="hard"> <ReactPdfPage pageNumber={pageNumber} width={width} /> </div> ); });

[grgicpetar]

You should be using only one HtmlFlipBook component. Currently you're rendering one HtmlFlipBook component per item in your map function.

Also you should probably use Document (pdf viewer) as a container for one Page.

[ZofSlytherin]

<HTMLFlipBook width={width} height={height}> {filteredData.map((item, index) => { return ( <Document key={index} file={item.url}> <Page pageNumber={1} /> </Document> ); })} </HTMLFlipBook>

like this ?
if not please share correct code

[grgicpetar]

Yup, like that. Does it work now?

[ZofSlytherin]

console errors are cleaned but still rendering every pdf page individually

[ZofSlytherin]

{filteredData.map((item, index) => { return ( <Document key={index} file={item.url}> <HTMLFlipBook width={width} height={height}> {[...Array(item.numPages)].map((_, pageIndex) => ( <div className="demoPage" key={pageIndex}> <Page pageNumber={pageIndex + 1} width={width} height={height} /> </div> ))} </HTMLFlipBook> </Document> ); })}
here is code that i have updated
Please let me know