No flip animation each page is rendering independantly

[quteboy]

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 (

    );
  })}

`

[quteboy]

` const Page = React.forwardRef(({ pageNumber }, ref) => { return (

);

}); `

[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.

[quteboy]

`

{filteredData.map((item, index) => { return ( ); })}

`

like this ? if not please share correct code

[grgicpetar]

Yup, like that. Does it work now?

[quteboy]

console errors are cleaned but still rendering every pdf page individually

[quteboy]

` {filteredData.map((item, index) => { return (

{[...Array(item.numPages)].map((_, pageIndex) => (

))}

    );
  })}

` here is code that i have updated Please let me know