Get Free Trial

Prompted not function error when using ReactDOM.createPortal(<Flexmonster />,container>

Answered
uchivoitachi asked on March 28, 2021

Dear,
I want to use window.open() api and ReactDOM.createPortal() api to pass the Flexmonster component to the created new window,however,it will prompt TypeError: f.container.substr is not a function and TypeError: Cannot read property ‘dispose’ of undefined.
 
Here is my scenario:
1.There is a existing flexmonster pivot table.
2.Select some cells in the pivot table and right-click to open a new flexmonster instance in a new window,in my case I was using window.open() api and ReactDOM.createPortal() api to do this,but failed.
Since my project is a react-based project and it seems the ReactDOM.createPortal() is the much appropriate api to achieve such goal.
 
So,is there a better way to open another Flexmonster instance and show the selected cells data on it?Or can I solve that two error when using ReactDOM.createPortal() api,thanks!
 
The demo code and errors.png are attached for your reference.
 

2 answers

Public
Vera Didenko Vera Didenko Flexmonster March 30, 2021

Hello, 
 
Thank you for reaching out to us.
 
You are right, it seems using ReactDOM.createPortal() is the suggested approach when it comes to rendering React components in a new window.
We have prepared a simple React project for illustration purposes (please see "pivot-react.zip" in the attachments). 
In the example, a new “Open in new pivot” option is added to Flexmonster’s context menu for opening a new Flexmonster instance in a new window.
Please note that this example only illustrates the general idea of how Flexmonster could be rendered in a new window in React.
 
To start the sample project, please run the following commands:

npm i

npm start

 
Hope this helps!

Please feel free to reach out if other questions arise.
 
Kind regards,
Vera

Attachments:
pivot-react.zip

Public
uchivoitachi April 12, 2021

Hello,
Thanks for the assistant and we’ll try your suggestion!

Please login or Register to Submit Answer