How to push value in array of objects in loop?

Question

How can I push array in objectlist in react state in loop?

My default state:

this.state = {
            users: [
                {
                    id:1,
                    name: 'John'
                },
                {
                    id:2,
                    name: 'Nick'
                }
            ]
        };

I tried something like this, but it's not working

changeHandler (currentUser, newValue) {
        const users = this.state.users;
        for (var i in users) {
            if (users[i].id == currentUser) {
                this.setState({
                    users: [...this.state.users[i], {newValue: newValue}]
                })
            }
            break;
        }
    }

So I expect to see:

default state - {id:1,name: 'John'},{id:2, name: 'Nick'} 
use changeHandler(2,1) - {id:1,name: 'John'},{id:2, name: 'Nick', newValue: [1]}
use changeHandler(2,2) - {id:1,name: 'John'},{id:2, name: 'Nick', newValue: [1,2]}
use changeHandler(2,3) - {id:1,name: 'John'},{id:2, name: 'Nick', newValue: [1,2,3]}

Shubham Khatri · Accepted Answer · 2019-02-01 09:13:44Z

1

You can map and update the state using spread syntax like

changeHandler (currentUser, newValue) {
    const users = this.state.users;
    this.setState(prevState => ({
       users: prevState.users.map((user => {
           if (user.id == currentUser) {
              return {
                  ...user,
                  newValue: [...(user.newValue || []), newValue]
              }
           }
           return user
       }))
    }))
}

answered Feb 1, 2019 at 9:13

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Comments

HMR · Accepted Answer · 2019-02-01 09:13:11Z

0

You can use map:

this.state.users.map(
  (user)=>user.id===currentUser
    //if user id is current user then copy user to new object {...user}
    //set newValue to user.newValue or empty array newValue:(user.newValue||[])
    //add the newValue to user.newValue: .concat(newValue)
    ? {...user,newValue:(user.newValue||[]).concat(newValue)
    //user is is not currentUser, just return the user as is
    : user
)

answered Feb 1, 2019 at 9:13

HMR

39.5k26 gold badges99 silver badges175 bronze badges

2 Comments

mab Over a year ago

In React, state is should stay immutable, you have to use setState method to update it.

HMR Over a year ago

@mab yes, the complete version is: this.setState({...this.state,users:this.state.users.map(---

mab · Accepted Answer · 2019-02-01 09:40:20Z

Short one:

changeHandler (currentUserId, newValue) {
  this.setState(({ users }) => ({
    users: users.map(user => ({
      ...user,
      ...(
        user.id === currentUserId
          ? { newValue: [...(user.newValue || []), newValue]}
          : {}
      ),
    }))
  }));
}

Long one:

changeHandler (currentUserId, newValue) {
  this.setState(({ users }) => {
    const otherUsers = users.filter({ id } => id !== currentUserId);
    const currentUser = users.find({ id } => id === currentUserId);
    return {
      users: [
        ...otherUsers,
        {
          ...currentUser,
          newValue: [
            ...(currentUser.newValue || []),
            newValue
          ],
        },
      ],
    };
  });
}

Short version of long one:

changeHandler (currentUserId, newValue) {
  this.setState(({ users }) => ({
    users: [
      ...users.filter({ id } => id !== currentUserId),
      {
        ...users.find({ id } => id === currentUserId),
        newValue: [...(currentUser.newValue || []), newValue],
      },
    ],
  }));
}

Collectives™ on Stack Overflow

How to push value in array of objects in loop?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related