React - prevstate issues, getting back old value - reactjs

Question

I have an SVG map with paths, and those paths change colors when I hover over them.
It changes state of specific section, for example my state looks like that:
POL3139: {
color: '#fbb9c5'
},
I am trying to switch back to the base color after I leave the path.
Here I am changing
onHover = (event) => {
event.stopPropagation();
const e = event.target.id
this.setState(prevState => ({
[e]: {
...prevState,
color: '#650df9'
},
}));
}
It totally works and changes my color to the picked one.
But then I am trying to revert back to the original one.
I tried that by making a base color in the state:
POL3139: {
color: '#fbb9c5',
base: '#fbb9c5'
},
and then onMouseLeave:
onLeave = (event) => {
event.stopPropagation();
const e = event.target.id;
this.setState(prevState => ({
[e]: {
...prevState,
// color: prevState.base - doesn't work
// color: prevState.[e].base - doesn't work
// color: [prevState.e.base] - doesn't work
color: 'pink'
}
}));
}
I was trying many possible solutions but I can't get it to work.
I am still learning react and it might be an easy one but I can't figure it out.

Answer 1

I don't think you're deconstructing your prevState properly.
Here's an example to illustrate how to deconstruct:
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
state = {
style: {
color: "black",
base: "black",
cursor: "pointer"
}
};
handleMouseEnter = e => {
const { style } = this.state;
this.setState({ style: { ...style, color: "red" } });
};
handleMouseLeave = e => {
const { style } = this.state;
this.setState({ style: { ...style, color: style.base } });
};
render() {
return (
<div
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
style={this.state.style}
>
<h1>hello</h1>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
In this case style is equivalent to your [e].
In particular, look at the deconstructing here:
this.setState({ style: { ...style, color: style.base } });
There's a working example here.