Apply values from one object in state to another object in state?

[jameschetwood]

I have one object in state "a" and I apply the values from this to another object "b". When I mutate "b" and then reapply "a" it has the mutated not original value. I need the original values to be reapplied.

Here is my example code
https://codesandbox.io/s/confident-wildflower-d43w8r?file=/src/App.js:0-787

import { proxy, useSnapshot } from "valtio";

const first = {
  name: "First",
  value: 1
};
const second = {
  name: "Second",
  value: 2
};
const initState = {
  active: first,
  saved: [first, second]
};
const store = proxy(initState);

export default function App() {
  const snap = useSnapshot(store);
  return (
    <div>
      <h2>Active:</h2>
      <p>Name: {snap.active.name}</p>
      <p>Value: {snap.active.value}</p>
      <button onClick={() => store.active.value++}>Increment</button>
      <br />
      <h2>Options:</h2>
      <ul>
        {snap.saved.map((item) => {
          return (
            <li key={item.name} onClick={() => (store.active = item)}>
              {item.name} - {item.value}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Here is a video recording of the issue: https://www.loom.com/share/0f11ba769f2a403dbf867b0cca315afa

The steps are:

• The initial state of "active" is "Name: First" and "Value: 1"
• Click on the second option. Now "active" is "Name: Second" and "Value: 2"
• Click "increment" and "active" is now "Value: 3"
• Click on the first option and "active" is "Name: First" and "Value: 1"
• Click on the second option. Now "active" is "Name: Second" and "Value: 3". I need the "Value" to be "2"

[jameschetwood]

Ah so its a simple fix with lodash's cloneDeep. Not sure if this is best practice though?

onClick={() => store.active = cloneDeep(item)

[dai-shi]

Does this work?

        {snap.saved.map((item, index) => {
          return (
            <li key={item.name} onClick={() => (store.active = store.saved[index])}>

[dai-shi]

We should merge #676, which covers this to some extent.

[jameschetwood]

Does this work?

        {snap.saved.map((item, index) => {
          return (
            <li key={item.name} onClick={() => (store.active = store.saved[index])}>

Now both "Options" and "Active" are in sync but this isn't want I need. I need "Options" to not mutate and for it to reset "Active" to it's original values when clicked.

[dai-shi]

cloneDeep would be the right approach for your case then.
See the related discussion: #701 (comment)