I know how it can be done with Functional Components. But when it comes to class components, I'm having few questions to be clarified.
I've a class here,
class MyTable extends Component {
constructor(props) {
super(props);
this.state = {
page:0,
rowsPerPage:10
}
}
handleChangePage(event) {
//Here I want to update only **page** keeping **rowsPerPage** intact
}
handleChangeRowsPerPage(event) {
//Here I want to update only **rowsPerPage** keeping **page** intact
}
render() {
return(
<SomeComponent
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
)
}
}
export default Mytable;
So here what I want to know is,
If I want to update only page inside the state object, should I have to preserve rowsPerPage and update them both as
this.setState({page:<updatedValue>, rowsPerPage:<preservedValue>);
And Vice versaWhat code goes inside handleChangePage and handleChangeRowsPerPage, if we can update independent properties inside a state object.
What's the best practice when we've several such states and we want to update each one independently?
You can update
page
androwsPerPage
independently as I did bellow. You have just to callthis.setState
and passing and object with thekey
of state you want to update