how to implement handsontable in react using fetch api or axios?

[rishi1804]

Description

I am trying to fetch JSON data using fetch API from https://jsonplaceholder.typicode.com/users
but I don't know what's is going wrong it doesn't implement handsontable , but when I print the fetched data in console It is there.
you can make your own column headers according to the data.
please help @AMBudnik @panesofglass @tomalec @archit

Steps to reproduce

Demo

https://jsfiddle.net/handsoncode/8ffpsqt6/

Your environment

• Handsontable version:
• Browser Name and version:
• Operating System:

[pnowak]

Hi @rishi1804

I prepared the demo that I'm trying to simulate fetch action - https://codesandbox.io/s/fetch-data-o4qe9

Is it similar that you wanted to do?

[rishi1804]

@pnowak thhanks for the answer but this does not solve my problem.
actually below is what I am trying to do.
but I don't know it is not generating a table

import React from 'react';
import { HotTable } from '@handsontable/react';
import Handsontable from 'handsontable'

class App extends React.Component {
constructor(props) {

super(props);

this.state = {
   items: [],
    isLoaded:false,
    mydata:[{"key": "Ambrish Contract 01"},
           {"key": "Ambrish Contract 02"}],
    handsontableData:Handsontable.helper.createSpreadsheetData(6,10)
           
}
// this.handsontableData = Handsontable.helper.createSpreadsheetData(6, 10)

}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(data => {
this.setState({ items: data,
isLoaded: true,

    mydata:data,
    handsontableData:Handsontable.helper.createSpreadsheetData(data)
    
  })
    // console.log(this.items)
    console.log(this.state.mydata)
    
    // console.log(this.state.handsontableData)

}).catch((err)=>{
console.log(err)
})
}
render() {
return (

<HotTable 
        data={this.state.mydata}
        colHeaders= {true}
        rowHeaders= {true}
        licenseKey= 'non-commercial-and-evaluation'
      />
   
  </div>
  
);

}
}

[rishi1804]

@pnowak
there are some useless statement that I have written while experimenting but I hope you can get what I actually I am trying to do

[pnowak]

Could you fork this demo - https://codesandbox.io/s/fetch-data-k814i - and update it to better reflect your needs and your issue.

In (not)working example is much easier to work ;)

[rishi1804]

@pnowak okay I will fork the demo

[rishi1804]

@pnowak I have just forked the demo
please let me know if you can understand the issue.

[pnowak]

@rishi1804 Can you share a link to your demo?

[rishi1804]

@pnowak here is the link
https://codesandbox.io/s/fetch-data-xs677?fontsize=14&hidenavigation=1&theme=dark

[rishi1804]

@pnowak leave it
I have figured out the mistake I was making
thank you for your help.

[boesendorfer]

@rishi1804 I have the similar problem. The hotTable can not show all the data(array[objects]) that is received by axios after it is rendered the first time. (All the new columns in the received data are missing). But the hotTable can show all the data normally if I render it again. Could you tell me the mistake you've made? Thanks!

[rishi1804]

@boesendorfer I am not sure about your problem but I can tell you the exact scenario that I have faced
I had used fetch but after changing the state in componentDidmount I wasn't able to get the handsontable with the fetched data and it was because of a small mistake that I was not providing providing data in appropriate form in the initial state. I know this is not the perfect solution but it worked for me
I can show you the mistake and the solution with an example.