React Spreadsheet: TypeError: Bind must be called on a function when passing sheets array prop

[John Smith]

Hello, 

I am trying to use the React Spreadsheet component as shown but have ran into an issue:

TypeError: Bind must be called on a function

    at bind (<anonymous>)

    at s (index.js:1)

    at ae (index.js:1)

    at t.eval [as cells] (index.js:1)

    at d (index.js:1)

    at t.e.setProperties (index.js:1)

    at ae (index.js:1)

    at t.eval [as rows] (index.js:1)

    at d (index.js:1)

    at t.e.setProperties (index.js:1)

Note the that initialisation looks like this

<Spreadsheet

showRibbon={false}

showFormulaBar={false}

allowSave={false}

sheets={workbook.sheets}

/>

and also note that the workbook is being produced on the server using your XLSIO library. An example snippet of the sheets array I am trying to load:

FYI The JSON we are using is based on this example file

https://file-examples.com/wp-content/uploads/2017/02/file_example_XLS_50.xls

Can you confirm how I can resolve this?

[Saranya Dhayalan]

Hi John Smith, 

  

Thank you for contacting Syncfusion support. 

  

We have checked your reported query with provided code snippet, we suggest you use the <SpreadsheetComponent/> tag element for to resolve your reported issue. We have created a sample for your reference in that we have rendered the spreadsheet component and your provided xls file is successfully opened on it. Please refer the below sample and documentation link. 

  

Sample link: 

https://stackblitz.com/edit/react-76s7vt-rekgwu?file=index.js 

  

Documentation link: 

https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#spreadsheetcomponent 

  

Could you please check the above sample and let us know whether this is fulfilling your requirement, if not please share us more information regarding this. So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 

  

Regards, 

Saranya D 

[John Smith]

Hello, 

Thanks for your reply. I've forked the StackBlitz example and added the example file I am trying to load. Please note that I am trying to pass the data via the sheets property and not by using the openUrl property. I believe the openUrl requires a Syncfusion server component to be running which we are not using. Note that the error message in the StackBlitz is different to my local environment (maybe due to versions being different) but that it still doesn't load. This Excel JSON was produced by the SF XLSIO library. 

FYI I am using the SpreadsheetComponent already but I wrapped it in a component called Spreadsheet. 

https://stackblitz.com/edit/react-76s7vt-ky2jlk?file=index.js

SB Error:

Error in /turbo_modules/react-dom@16.9.0/cjs/react-dom.development.js (13813:28)

Objects are not valid as a React child (found: object with keys {columns, name, rows, selectedRange, topLeftCell, usedRange}). If you meant to render a collection of children, use an array instead.
in div (created by t)
in t (created by Default)
in div (created by Default)
in div (created by Default)
in Default

[Arunkumar Devendiran]

Hi John,  

  

Good day to you. 

 

We have checked your reported query with provided stackblitz sample, we suspect that you are trying to the load the json data to in our EJ2 spreadsheet. We would inform that currently we does not include the save as Json and load from Json support on our EJ2 spreadsheet. We have already considered this feature, and it will be included in our upcoming patch release and appreciate your patience until then. 

 

Regards,  

Arunkumar D 

[John Smith]

Hi Arunkumar, 

Thanks for your reply. 

Can you just confirm that you are saying that I cannot use the sheets property to load a JSON object? If that's the case, what is the purpose of the sheets property on the React component. Also, what I am doing is basically the same as shown here in your docs, is it not?

https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#sheets

Are there any workarounds until the component is updated? Using the service URL is not an option for me currently. 

Thanks

[Arunkumar Devendiran]

Hi John, 

  

Good day to you. 

 

We have checked your reported query and we would inform that you can load the json data using sheets property.  We suggest to you use the sheets property on the <SpreadsheetComponent> tag element in this way you can load the json data. We have created the sample for your reference in that we have achieved your requirement. Please refer the below sample link and code snippet. 

 

Code Snippet: 

 

<SpreadsheetComponent sheets={ExcelDoc.Workbook.sheets}></SpreadsheetComponent> 

 

 

 

Sample Link: 

https://stackblitz.com/edit/react-76s7vt-wubg4d?file=index.js 

 

Please get back to us if you need further assistance. 

 

Regards, 

Arunkumar D