React - override state by exists object properties - reactjs

Question

I have state with properties initialized with empty string, because im putting these into form inputs. Additionaly I get object from Firebase with properties matching with state but not every one exists. I would set state properties by properties of this object if properties exists.
Here is necessary example:
class App extends Component {
state = {
user: {
firstName: "",
lastName: "",
gender: "",
address: {
street: "",
city: "",
state: ""
}
}
}
componentDidMount(){
const newObjectFromFirebase = {
firstName: "Lucas",
address: {
city: "London"
}
}
this.setState(newObjectFromFirebase);
}
render() {
const stateJson = JSON.stringify(this.state);
return (
<div className="App">
{stateJson}
</div>
);
}
}
I would like to get state with override properties in only these properties which exists in object from firebase. Otherwise I would like to keep the previous state. Currently state properties are completely overwritten by new object.
Thats what I want:
user: {
firstName: "Lucas",
lastName: "",
gender: "",
address: {
street: "London",
city: "",
state: ""
}
}
Thats what I have:
user: {
firstName: "Lucas",
address: {
city: "London",
}
}
Any smart solution or library ?

Answer 1

You can just use the spread syntax ... like this:
const newObjectFromFirebase = {
firstName: "Lucas",
address: {
city: "London"
}
}
this.setState(prevState => {
user: {
...prevState.user,
...newObjectFromFirebase,
address: {
...prevState.user.address,
...newObjectFromFirebase.address
}
}
});
This will merge the 2 objects together and override the state.