React object property value being duplicated on .push inside loop

Question

I have a handleCreate function that takes care of taking some user data and inserting it into a database.

Inside the aliasArr.forEach() loop I POST into my DB new user instances for each element in the aliasArr array. This particular code works as expected, if I check the DB, I will find the new members.

After saving the new members, I want to keep the members in the members array so I can pass it along to another function.

For this, I'm doing members.push(memberAttributes); but if I log the contents of members I get the right amount of elements but the alias property value is duplicated (all other properties should have the same value cause they are being added into the same role in a batch operation).

If I have two new users, say: xyz and abc, I get:

[
    {alias: "abc", Role: "admin", "grantedBy": "someone"},
    {alias: "abc", Role: "admin", "grantedBy": "someone"},
]

Instead of:

[
    {alias: "xyz", Role: "admin", "grantedBy": "someone"},
    {alias: "abc", Role: "admin", "grantedBy": "someone"},
]

Here's the code:

 handleCreate = () => {
    const { memberAttributes } = this.state;
    const { role, createRoleMember } = this.props;
    const roleArr = [];
    roleArr.push(role);
    const aliasArr = memberAttributes.alias.split(",");
    let members = [];

    //false hardcoded during debugging.
    if (false /* await aliasIsAdmin(memberAttributes.alias, roleArr) */) { 
      this.setState({ userExists: true }); 
    } else {
      memberAttributes["Granted By"] = window.alias;
      memberAttributes.Role = role;
      memberAttributes.timestamp = Date.now().toString();
      this.handleClose();

      aliasArr.forEach((currAlias) => {
        memberAttributes.alias = currAlias;
        console.log("memberAttributes:", memberAttributes);

        members.push(memberAttributes);
        console.log("members", members);

        const marshalledObj = AWS.DynamoDB.Converter.marshall(memberAttributes);

        const params = {
          TableName: "xxx",
          Item: marshalledObj,
        };

        axios.post(
          "https://xxx.execute-api.us-west-2.amazonaws.com/xxx/xxx",
          params
        );
      });
    }
    createRoleMember(members); //passing members to this function to do more stuff.
  };

I'm wondering if this issue is due to memberAttributes being part of the component's state.

Try doing members.push({...memberAttributes});. This will make a copy of memberAttributes — iz_
– iz_, Commented Aug 31, 2020 at 18:54
You're mutating the state. you have this.state.memberAttributes and you're modifying memberAttributes. State is immutable. You must setState to modify it. — Wyck
– Wyck, Commented Aug 31, 2020 at 18:55
Is writing members.push({ ...memberAttributes, alias: currAlias }); OK or coukd that break something in react's state? Thank you everyone for your comments and helping out — 10110
– 10110, Commented Aug 31, 2020 at 19:13

Kevin Hoopes · Accepted Answer · 2020-08-31 18:55:25Z

1

The problem here is that you are pushing references to the same object into the array after changing a value within that object. So whenever you make the change to memberAttributes.alias, it's changing the alias to the most recent one. After that, all references to the same object (which in this case is every item in the members array) present the new value in alias.

const obj = { alias: 'abc', role: 'role1' }
const arr = []

arr.push(obj)

obj.alias = 'new alias'

arr.push(obj)

for (var mem of arr) {
  console.log(mem)
}

To fix it, you need to create a new object each time and push it onto the array instead, like so:

aliasArr.forEach((currAlias) => {
   // Creates a new object in memory with the same values, but overwrites alias
   const newMemberAttributes = Object.assign(memberAttributes, { alias: currAlias });
   console.log("memberAttributes:", newMemberAttributes);

   members.push(newMemberAttributes);
   console.log("members", members);
   ...
}

Similarly, you can use the spread operator to create a deep copy of the object and then reassign alias.

aliasArr.forEach((currAlias) => {
   // Creates a new object in memory with the same values, but overwrites alias
   const newMemberAttributes = { ...memberAttributes };
   newMemberAttributes.alias = currAlias
   console.log("memberAttributes:", newMemberAttributes);

   members.push(newMemberAttributes);
   console.log("members", members);
   ...
}

answered Aug 31, 2020 at 18:55

Kevin Hoopes

5173 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

10110 Over a year ago

I tried members.push({ ...memberAttributes, alias: currAlias }); and it worked great, would this be okay to do? Thank you for the explanation and the solution I was going crazy!

Kevin Hoopes Over a year ago

Yep, that works as well, since you're still creating a new object. I separated it across multiple lines for ease of understanding, but shorthanding it like that is totally acceptable. All personal preference.

Collectives™ on Stack Overflow

React object property value being duplicated on .push inside loop

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related