score:1

Accepted answer

it is bad practice to set initial values to state at the constructor, therefore use lifecycles as componentdidmount or componentdidupdate instead to manipulate the state.


 export class householdalertspure extends react.component {

 constructor(props) {
  super(props);
  // initial values for state
  this.state = {
  tablealerts: [],
  startdate: null,
  enddate: null,
  selectedseverity: null,
  ischecked: false      
 }
}

componentdidmount() {
 // values declared for state at component first load
 this.setstate({
  startdate: moment()
    .subtract(30, 'days')
    .startof('day'),
  enddate: moment().endof('day'),
  selectedseverity: null,
  ischecked: true,
  tablealerts: this.props.householdalerts
});

componentdidupdate() {
// called whenever prop value changed
 if(this.props.householdalerts !== this.state.tablealerts) 
      this.setstate({ tablealerts: this.props.householdalerts })
}

selectongoingalerts = (e, data) => {
 const { ischecked, tablealerts } = this.state;
 this.setstate( {ischecked : !ischecked} );
 // right now, { ischecked } still refer to construct abouve methond and prev value... 
// for more consist aproach, consider do the filtering logic direct at render without manipulate state
 if(!ischecked) { 
  this.setstate( { tablealerts: tablealerts.filter((alert) => alert.settimestamp < alert.cleartimestamp)} )
 } else { this.setstate({tablealerts}) }
}
 ...rest class...
}

now at render, { this.state.tablealerts } should contain the correct information

score:1

you should probably use componentdidupdate. it runs on each state and prop change.

this is an example of how it can be used:

componentdidupdate(prevprops) { 
  if(this.props.householdalerts !== prevprops.householdalerts) { 
    this.setstate({ tablealerts: this.props.householdalerts }) 
  } 
}

Related Query

More Query from same tag