Finding Maximum value in an Array of Objects by ReactJs - reactjs

Question

I have a series of data that contains some objects in an array(json file) and it will be shown by fetch request.There is a renderMaxTotal() function that must get me the max number of in totalcomof all data of json file but it shows me the max number of in totalcom in the current page and by going to another page the amount of renderMaxTotal() will be changed.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
library: null,
perPage: 20,
currentPage: 1,
maxPage: null,
};
}
componentDidMount() {
fetch('/json.bc', {
method: 'get',
})
.then(response => response.text())
.then(text => {
let Maindata = JSON.parse(text.replace(/\'/g, '"'))
this.setState(state => ({
...state,
data: Maindata
}), () => {
this.reorganiseLibrary()
})
}).catch(error => console.error(error))
}
reorganiseLibrary = () => {
const { perPage, data } = this.state;
let library = data;
library = _.chunk(library, perPage);
this.setState({
library,
currentPage: 1,
maxPage: library.length === 0 ? 1 : library.length
})
}
// Previous Page
previousPage = event => {
this.setState({
currentPage: this.state.currentPage - 1
})
}
// Next Page
nextPage = event => {
this.setState({
currentPage: this.state.currentPage + 1
})
}
// handle per page
handlePerPage = (evt) =>
this.setState({
perPage: evt.target.value
}, () => this.reorganiseLibrary());
// handle render of library
renderLibrary = () => {
const { library, currentPage } = this.state;
if (!library || (library && library.length === 0)) {
return <div className="nodata">No Result</div>
}
return library[currentPage - 1].sort((a, b) => a.total - b.total).map((item, i) => (
<div className="item">
<span>{this.renderTotalcom(item)}</span>
</div>
))
}
// handle render of library
renderMaxTotal = () => {
const { library, currentPage } = this.state;
if (!library || (library && library.length === 0)) {
return <div className="nodata">No Result</div>
}
return Math.max(...library[currentPage].map(item => item.totalCom))
}
render() {
const { library, currentPage, perPage, maxPage } = this.state;
return (
<div>
<span className="max">{this.renderMaxTotal()}</span>
{this.renderLibrary()}
<ul id="page-numbers">
<li className="nexprevPage">
{currentPage !== 1 && (
<button onClick={this.previousPage}><span className="fa-backward"></span></button>
)}
</li>
<li className="controlsPage active">{this.state.currentPage}</li>
<li className="restControls">...</li>
<li className="controlsPage">{this.state.maxPage}</li>
<li className="nexprevPage">
{(currentPage < maxPage) && (<button onClick={this.nextPage}><span className="fa-forward"></span></button>
)}
</li>
</ul>
</div>
)
}
renderTotalcom(element) {
console.log(typeof element.totalCom)
return element.totalCom
}
}
ReactDOM.render(<App />, document.getElementById('Result'))
If I change renderMaxTotal() to this:
Math.max(...library[0].map(item=>item.totalCom))
it will show me the max of first page and by turning to another page it does not change.
If I change renderMaxTotal() to this:
Math.max(...library.map(item=>item.totalCom))
it will be NaN.
How can I have the max amount of totalcom in whole pages?

Answer 1

The code below will get the max of each pages and compare it with the current Max.
// handle render of library
renderMaxTotal = () => {
const { library } = this.state;
if (!library || (library && library.length === 0)) {
return <div className="nodata">No Result</div>
}
return library.reduce((acc,lib)=>{
const libMax = Math.max(...lib.map(item => item.totalCom))
return libMax > acc ? libMax : acc
},0)
}