How to update an object with setState in React
In this tutorial, we are going to learn about how to update the object properties with a setState method in react.
Consider we have a react component like this.
App.js
import React,{Component} from "react";
class App extends Component{
state ={
user: { name: "John", age: 19, active: true } }
render(){
const {name, age} = this.state.user;
return(
<div>
<p>{name}</p>
<p>{age}</p>
<button>Update age</button>
</div>
)
}
}
export default App;Now, we need to update the user object properties by calling a setState() method.
Updating the object properties
To update the object properties, we need to use the spread operator in setState method.
Example:
App.js
class App extends Component {
state = {
user: {
name: "John",
age: 19,
active: true
}
};
handleAge = () => {
this.setState({
user: { ...this.state.user, age: 29 } });
};
render() {
const { name, age } = this.state.user;
return (
<div>
<p>{name}</p>
<p>{age}</p>
<button onClick={this.handleAge}>Update age</button>
</div>
);
}
}
export default App;In the above code, we first initialized a new object then added a copy of the user object using spread operator (...user) and finally we updated the age property with a value 29.
Similarly, we can also use the updater function inside a setState method.
this.setState((state,props)=>{
return {
user: {
...state.user,
age: 29
}
}
})- Share:
