dataTable with own sort function
Posted: 16 May 2019, 14:10
I'm using dataTable in the following way:
I get an error when calling this.props.fetch() in the mySort method. this.props.mySort collects new data from the backend sorted by the respective column. The error is: Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
this.props.fetch is now called in an infinite loop.
How can I fix this?
Best regards,
Joachim
Code: Select all
constructor(props) {
super(props);
let columns = [
{ field: "foo", header: "bar", sortable: true, sortFunction: this.mySort }
]
this.state = {
cols: columns
}
this.colOptions = [];
for (let col of this.state.cols) {
this.colOptions.push({ label: ` ${col.header}`, value: col });
})
}
mySort = (e) => {
if (e.order === 1) {
console.log("1")
this.props.fetch({...)}
} else {...}
}
render() {
let columnData = this.state.cols.map((col, i) => {
return <Column className="columnheader" style={col.style} key={col.field} field={col.field}
header={col.header} sortable={col.sortable} sortFunction={col.sortFunction} body={col.body} expander={col.expander} />
});
return(
<DataTable>
value={fetchResults}
{columnData}
</DataTable>
)
}
this.props.fetch is now called in an infinite loop.
How can I fix this?
Best regards,
Joachim