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 })
}
}
Source: stackoverflow.com
Related Query
- Get data from React props
- Get object data and target element from onClick event in react js
- How to get the data from React Context Consumer outside the render
- React TypeScript get Data Attribute From Click Event
- How can I get data from a local file into my React app?
- How to get form data from input fields in React
- How do I access data returned from an axios get to display on a web page using react js?
- React get props from Router with React Hooks
- React what's the right way to get a parent props from its children
- React Context : Get Data from API and call API whenever some events happens in React Component
- React - Typescript interfaces - errors when get props from union types
- React native Material drop down get id from json data
- How to get data from react context
- React - Passing fetched data from API as props to components
- React - Can't get function to fire from child props
- How can I get data from query string using route in react js
- Get data from React to Flask via POST
- React Dynamically download Components and get data from all child components
- no argument props method does not get called from child component in react
- Can't get data from firebase in react chart
- React - How to get state data from a child component?
- How to get data from table row click using Semantic's React Table Component
- React admin get unique data from db for selectInput
- get data from multiple react child and send into one API
- How to get access to a specific reducer variables as props from react without using routes
- Get data From IonModal In Ionic React
- How to access data from get request made by a React functional component to localhost server using Axios?
- React Props - can not get data
- How can I get the right data from database with react
- use axios with react to get data from api
More Query from same tag
- Redux warning only appearing in tests
- How to output eslint errors in the browser when using reactjs
- Testing styled components with react-testing-library
- How to replicate Jinja2 macros with JS/React?
- How to use useMemo replacing useEffect?
- How to apply ag-grid custom filter when clicking a button
- How do you do a "day" picker in Ant Design?
- How to get username and password in a javascript object in ReactJS?
- Modeling optional filter params in react-apollo
- React & Jest: Cannot find module from test file
- Bootstrap NavBar do not set up li class="active" with React-Router. ReactJS
- Child component causing too many renderings on parent component when changing global state in React
- React: How can I import only a specific subset of data from a data file?
- React export to csv - No Headers in the csv file
- Trigger useEffect from functional Component with global variable
- React: need some help understand strict mode and what what qualifies as a side effect
- I have a CSS and I want it to be aligned in-line
- bind() doesn't run when onClick is used on dropdown item
- Form submission using react without having state
- React-JS : Initializing a global variable in componentDidMount but not getting its value in render
- How to show dropdown in react js?
- Is there a way to check propTypes for observer(Component)
- Custom SingleValue and Option react-select - Option displays, but SingleValue doesn't
- Input text - 'defaultValue' is not loading the state value and 'value' is not updated on change
- Why can react-test-renderer only findByType functional components in the same file in React?
- How to force Gatsby to redirect a specific URL path to an external site?
- How to Download Pdf File in React From Api
- how to get data from localstorage and set state react
- How to render thousands of div without affecting app performance?
- NPM module throws an error when being imported