Reactjs array mutation

Question

I have this function:

setNotActiveWalletsList = () => {
   
    const { GetAccounts } = this.props;
    let shallowCopyOfWalletsArray = [...GetAccounts]  
    const notActive = shallowCopyOfWalletsArray.filter(user => user.active !== true);


    let newArr = notActive.map(item => {

      return decryptAccountInformation(item).then(result => {
          !result.address ? null : item.address = result.address
      })
   
    });

    this.setState({ onlyNotActive: newArr });
  }

GetAccounts is an array of objects

The issue is, One of my colleagues have told me that I am mutating the array with this line:

 !result.address ? null : item.address = result.address

But I don't really understand why is this considered a mutation? I am sure I created a copy of the original array and modified it.

Any suggestions on how to resolve this, please?

It’s not good practice to mutate an array while mapping over it because it could have unexpected outputs. — evolutionxbox, Mar 11 '21 at 15:34
You created a shallow copy of the array, not the items, and you're then mutating the items. — Emile Bergeron, Mar 11 '21 at 15:35
You're also setting an array of promises as the `onlyNotActive` state, it that really intended? — Emile Bergeron, Mar 11 '21 at 15:36
Does this answer your question? [Whats the best way to update an object in an array in ReactJS?](https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — Emile Bergeron, Mar 11 '21 at 15:38
`JSON.parse(JSON.stringify(GetAccounts))` will give you new references. Assuming the `GetAccounts` only contains serializable types. — Jonathan Hamel, Mar 11 '21 at 15:55
@JonathanHamel that's mostly a hack for deep-copy, it's really not needed here. (It's really never needed IMO). — Emile Bergeron, Mar 11 '21 at 15:57

Shubham Khatri · Accepted Answer · 2021-03-11T16:05:18.240

Spread syntax just does a one level closing of the object or array. Any object or array which is more than one level deep will still have the same reference. Hence when you using notActive array items, you are essentially working on the same reference that was inside GetAccounts

The correct way to update is to return the cloned and updated reference from within the map function and using Promise.all to also handle the async call

setNotActiveWalletsList = () => {
   
    const { GetAccounts } = this.props;
    let shallowCopyOfWalletsArray = [...GetAccounts]  
    const notActive = shallowCopyOfWalletsArray.filter(user => user.active !== true);


    let promises = notActive.map(item => {

      return decryptAccountInformation(item).then(result => {
          return !result.address ? item : {...item, address: result.address}
      })
   
    });
    Promise.all(promises).then(newArr => this.setState({ onlyNotActive: newArr }));
    
  }

@EmileBergeron Thanks for pointing that out. I updated my answer — Shubham Khatri, Mar 11 '21 at 16:05

Reactjs array mutation

1 Answers1

Linked