Unable to set state in a react component - reactjs

Question

I have a react component that looks like this. I call a method cleanUpInvoices
to format a date in my array object(invoices). This works very well without any
problem. I tried to setState to dateCleanUpResult.
All I get is "dateCleanUpResult is not defined". I have tried so many things and nothing works.
I am not able to set state.
What is wrong with this code?
Here is the entire code
class Tester extends PureComponent {
constructor(){
super();
this.state = {
invoices:[],
startDate:'',
endDate:'',
queryResult:[],
dateCleanUpResult:[]
};
this.searchForInvoicesByDates = this.searchForInvoicesByDates.bind(this);
this.handleChange = this.handleChange.bind(this);
this.cleanUpInvoices = this.cleanUpInvoices.bind(this);
}
handleChange({ target }) {
this.setState({
[target.name]: target.value
});
}
componentDidMount() {
const getCustomerId = this.props.customer.customerId;
AXIOS_AUTHED.get(`${API}/customers/${getCustomerId}/invoices?sort=settledDate,desc`)
.then(res => {
const invoices= res.data.content;
this.setState({ invoices });
})
}
cleanUpInvoices(){
const invoice = this.state.invoices;
invoice.forEach(function(invoicer) {
const newDate = invoicer.settledDate.substring(0, invoicer.settledDate.indexOf('T'));
invoicer.settledDate = moment(newDate, 'YYYY-MM-DD').format('MM-DD-YYYY');
});
return this.setState({
dateCleanUpResult: invoice
}, () => this.state.dateCleanUpResult);
}
searchForInvoicesByDates(startDate, endDate){
var myResult = this.cleanUpInvoices();
console.log(myResult);
//now perform your date search based on the result from above
let cleanedStartDate = moment(startDate).format('MM-DD-YYYY');
let cleanedEndDate = moment(endDate).format('MM-DD-YYYY');
let filteredResult = [];
for(let i = 0; i < this.state.dateCleanUpResult.length; i++){
if(this.state.dateCleanUpResult[i].settledDate >= cleanedStartDate && this.state.dateCleanUpResult[i].settledDate <= cleanedEndDate) {
filteredResult.push(this.state.dateCleanUpResult[i]);
}
}
console.log(filteredResult);
const listItems = filteredResult.map((number) =>
<li key={number.orderNumber}>{number.orderNumber} - {moment(number.settledDate).format('MMM-DD-YYYY')} </li>
);
this.setState({queryResult:listItems});
return (
<ul>{listItems}</ul>
);
}
render() {
return (
<PageBase
navigation={['Customer Solution', 'Tester App']}
>
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<Paper>
<Typography className="customer-solution-subheader" component="h3" variant="subheading">
Tester App
</Typography>
<form>
<div className="customer-form-details">
<span>DATE RANGE COVERED*</span><br/>
<span className="ctrCalendar">
<label htmlFor="start">Start date:</label>
<input type="date" id="start" name="startDate" value={this.state.startDate} onChange={this.handleChange} required></input>
</span>
<span className="ctrCalendar">
<label htmlFor="start">End date:</label>
<input type="date" id="end" name="endDate" value={this.state.endDate} onChange={this.handleChange} required></input>
</span>
<span>
<Button variant="contained" className="next-button" id="btnSearchDates" onClick={() =>this.searchForInvoicesByDates(this.state.startDate, this.state.endDate)}>Search</Button><br/><br/>
</span>
<p>Search Result (Invoices/Dates)</p>
<div role="content" className="invContentParent">
<div name="teach" id="invContentChild">
</div>
</div>
</div>
</form>
</Paper>
</div>
</div>
</PageBase>
);
}
}
export default Tester;

Answer 1

It's almost right, but what's happining is that when you return the for the array it could be just the empty array you are initializing at the state of the component.
We fix that be passing a callback function to setState method, which is a function that returns the state you want, the updated one right?
That callback function will be invoked after insuring that the new state has been set, and, we also return the setState function, because it's the one that is returning the new state.
return this.setState({
dateCleanUpResult: invoice
}, () => this.state.dateCleanUpResult);
That ARTICLE is a good explanation for that matter.

Answer 2

I created a jsfiddle showing that you can update the state in your case.
http://jsfiddle.net/efp82rjg/3/
I think you are getting an issue because you are assuming cleanUpInvoices() will return the updated value of state. But it won't because setState is asynchronous and even though the value will be updated but it won't show the updated value to you. If you want to access the updated value after setState() then use the call back that is available to you after setState function. Please read the documentation here: https://reactjs.org/docs/react-component.html#setstate
class Hello extends React.Component {
constructor() {
super();
this.state = {
invoices: [
{ settledDate: 'no' },
{ settledDate: 'no' },
],
dateCleanUpResult: [],
};
this.cleanUpInvoices = this.cleanUpInvoices.bind(this);
}
cleanUpInvoices() {
const invoice = this.state.invoices;
invoice.forEach((invoicer) => {
invoicer.settledDate = 'testing';
});
this.setState({
dateCleanUpResult: invoice,
});
return this.state.dateCleanUpResult;
}
render() {
return (
<div>
<button onClick={this.cleanUpInvoices}>test</button>
{this.state.dateCleanUpResult.map(item => (
<div>{item.settledDate}</div>
))}
</div>
);
}

Answer 3

I'm assuming you receive the value of "undefined" where you are logging the returned value cleanUpInvoices in your searchForInvoicesByDateMethod. Although this is the result of the async nature of setState, implementing a setState callback will not remedy this issue (without more, it will merely let you access the updated state in the scope of that handler). If you want to stick to your current implementation, I would return a promise and async/await the returned promise value. This will delay execution of code in your searchForInvoicesByDates method when cleanUpInvoices is called.
cleanUpInvoices(){
// Avoid directly mutating state and generating circular reference by creating new array with map
const invoice = this.state.invoices.map(invoice => Object.assign({}, invoice));
//.....
//.....
return new Promise((res) => {
return this.setState({
dateCleanUpResult: invoice
}, () => res(this.state.dateCleanUpResult)));
}
}
////////
async searchForInvoicesByDates(startDate, endDate){
var myResult = await this.cleanUpInvoices();
//....
}
Trying not to deviate from the question posed, here is another quick thought that might simplify the implementation. Looks like you're initially making an API call on componentDidMount to retrieve the full universe of invoices, then generating a subset by date based on user input. Is it necessary to maintain the generated subset in state? Each time invoices are searched for by date, it seems you want to use the full universe returned from the API as your filter starting point. If that's the case, you can just immediately return the result from cleanUpInvoices -- no need for a state update. This would be different, of course, if you needed the invoice subset for further reference or manipulation.