sumit sumit - 2 years ago 281
Javascript Question

Loading ajax content on reactable - reactjs

It looks pretty simple but I am stuck here. I just want to load the ajax content and render it in the table. I am able to render it using static content

class ObjectDataExample extends React.Component {
constructor(props) {
super(props);
this.state = {appData: {}};

}




componentDidMount() {
axios.get('http://test.json')
.then((result)=> {

//const thisData = result.data;
this.setState({appData: result.data});
})
}

componentWillUnmount() {
this.serverRequest.abort();
}



// Render your table
render()
{
console.log(this.state.appData);
//I can see the above console logs
return (
//this is not coming
<Table className="react-listing-table table" data={this.state.appData} sortable={[
'Address',
'Suburb',
'Sale Date'
]}




defaultSort={{column: 'Sale Date', direction: 'asc'}}
defaultSortDescending>
//static content like below are rendered
<Tr className="react-listing-table table"
data={ [
{'Address':'address','Suburb':'suburb','Postc.':'2153','Sale Date':'21\/08\/17','Sale Price':'$640500','Comm':'$19200','LA':'($3545)','BA':'($2540)','Settelement':'12\/02\/2018'},
{'Address':'address','Suburb':'test','Postc.':'2153','Sale Date':'21\/08\/17','Sale Price':'$640500','Comm':'$19200','LA':'($3545)','BA':'TL($2540)','Settelement':'12\/02\/2018'},

]} />



</Table>
);
}
}

module.exports = ObjectDataExample;

window.WB.react.renderListingDataTable = function() {
render(
<Provider store={store}>
<ObjectDataExample/>
</Provider>,
document.getElementById('listing-table-wrapper')
);
}


I got the weird error Uncaught TypeError: this.data.concat is not a function

I AM using https://github.com/glittershark/reactable

Answer Source

Sorry Folks It was stupid mistake from my side , I declared array instead of object

constructor(props) {
        super(props);
        this.state = {appData: []}; //previously it was appdata:{}


 }

Thanks @bennygenal for pointing it out

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download