I am trying to utililise the Primereact DataView and the problem is that my data is loaded from the backend using an action. The following is my code and will explain my objective latter.
export const getFinishedProjects = () => dispatch => {
axios.get(finishedProjectsURL)
.then(res => {
dispatch({
type: GET_FINISHED_PROJECTS,
payload: res.data
});
}).catch(err => console.log(err))
}
componentDidMount() {
this.props.getFinishedProjects();
}
<div className="dataview-demo">
<div className="card">
<DataView
value={this.props.finishedprojects}
layout={this.state.layout}
header={header}
lazy
itemTemplate={this.itemTemplate}
paginator
paginatorPosition={'both'}
rows={this.rows}
totalRecords={this.state.totalRecords}
first={this.state.first}
/>
</div>
</div>
const mapStateToProps = state =>({
finishedprojects : state.finishedprojects.finishedprojects
})
export default connect(mapStateToProps, {getFinishedProjects} ) (FinishedProjects);
Now here is the problem now in the Documentation there are these two functions I assume are for loading data
componentDidMount() {
setTimeout(() => {
this.productService.getProducts().then(data => {
this.datasource = data;
this.setState({
totalRecords: data.length,
products: this.datasource.slice(0, this.rows),
loading: false
});
});
}, 1000);
}
onPage(event) {
this.setState({
loading: true
});
//imitate delay of a backend call
setTimeout(() => {
const startIndex = event.first;
const endIndex = event.first + this.rows;
this.setState({
first: startIndex,
products: this.datasource.slice(startIndex, endIndex),
loading: false
});
}, 1000);
}
With my approach I seem to get this error: Error: DataViewItem(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
My assumption is that maybe it has something to do with how I am loading data from backend. If thats the case may someone kindly help on how do I imitate those documentation like functions and render data in the DataView. Thanks in advance
