return (
<>
<ReportPageFetcher
tok={accessToken}
groupId={groupId}
reportId={reportId}
onPagesFetched={handlePagesFetched} // Pass the callback function
/>
{/* Header */}
<div className="header" >
<div className=" logo" >
<Image className="logo1 cursor-pointer" src={logo} onClick={() => {
nav.push('')
}} />
</div>
{
reportPages.map((page) => (
<button key={page.name} onClick={async function pag() {
const report_page = page.name
await report.setPage(report_page)
console.log(report_page)
}} > {page.displayName} </button>
))
}
</div>
{/* sidePanel */}
<div id="mySidebar" className="sidebar">
<div id='divtow-nav' className='nav-divtwo'>
{
reportPages.map((page) => (
<button key={page.name} onClick={async () => {
const navpage = (page.name)
console.log(navpage)
navigateToPage(page.name)
// await report.setPage(navpage)
}} > {page.displayName}</button>
))
}
</div>
</div>
{/* Embedding */}
<div className='embed'>
<PowerBIEmbed
embedConfig={{
type: 'report', // Supported types: report, dashboard, tile, visual, qna, paginated report and create
id: reportId,
embedUrl: embedurl,
accessToken: accessToken,
tokenType: models.TokenType.Aad,
viewMode: models.ViewMode.View,
settings: {
panes: {
filters: {
expanded: false,
visible: true
},
pageNavigation: { visible: true, position: models.PageNavigationPosition.Left },
},
},
}}
eventHandlers={
new Map([
['loaded', () => {
console.log('Report loaded');
}],
['rendered', function () { console.log('Report rendered'); }],
['error', function (event) { console.log(event.detail); }],
['visualClicked', () => console.log('visual clicked')],
['pageChanged', (event) => console.log(event)],
])
}
cssClassName="Embeded_class"
getEmbeddedComponent={(powerreport) => {
report = powerreport;
}}
/>
</div>
</>
);
}
when i run this and try to navigate between the report pages it shows thee error
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'setPage')
guide me to slove this error.
