javascript – Modifying an object is modifying the redux state in react js

I’m trying to modify an object which is created by copying contents from the redux state object. But the modification is happening in both the new object and redux state. Has anyone faced the same issue before ? Below is my code which causes this action.

render() {
    let dt = {}
    dt = {...this.props.data.tabledata};
    dt.rows=[...dt.rows].filter((key)=>key.Status!=="Deleted")
    dt.rows && dt.rows.map((e)=>
              {  e["Request Name"]=<Popup
                trigger={<span><Link to={{pathname:"/viewReq/"+e["Request Id"]+"/"+e["Type"]}} >{e["Request Name"]}</Link></span>}
                      position="top center"
                    >
                    </Popup>
              })
   
   return ()
}

dt and this.props.data.tabledata (redux state) are having same value (the field “Request Name” is converted to an object) after performing the dt.rows.map function. i don’t want the
this.props.data.tabledata” objects “Request Name” to turn into an object. it should be as is (a string by default).

Any help is appreciated

Read more here: Source link