How to set a default value into a prop in 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 renderMinTotal() function that must get me the min number of in totalcomof all data of json file.This function works correctly but I want the default value of FilterTotal be the result of renderMinTotal().For this I write this code :
let defaultFilterTotal = null;
defaultFilterTotal = FilterTotal
? (FilterTotal)
: (this.renderMinTotal ());
but the default value is empty. Why it is not been set as default value of
FilterTotal?
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
library: null,
perPage: 20,
currentPage: 1,
maxPage: null,
FilterTotal: "",
};
}
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 { FilterTotal, perPage, data } = this.state;
let library = data;
let defaultFilterTotal = null;
defaultFilterTotal = FilterTotal
? (FilterTotal)
: (this.renderMinTotal()); //The default value of FilterTotal is not been set .////
if (FilterTotal !== "") {
library = library.filter(item =>
item.totalCom > FilterTotal
)
}
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
renderMinTotal = () => {
const { library } = this.state;
if (!library || (library && library.length === 0)) {
return ''
}
return library.reduce((acc, lib) => {
const libMin = Math.min(...lib.map(item => item.totalCom))
return acc === undefined ? libMin : libMin < acc ? libMin : acc
}, undefined)
}
render() {
const { library, currentPage, perPage, maxPage } = this.state;
return (
<div>
<span className="max">{this.renderMinTotal()}</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) {
return element.totalCom
}
}
ReactDOM.render(<App />, document.getElementById('Result'))

Answer 1

The code returns this if there's no library, so it will be an empty string just like how this.state.FilterTotal is originally an empty string
if (!library || (library && library.length === 0)) {
return ''
}