Myujth

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.

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.