Updating the values in an array of objects in react js

Question

I am trying to merge two objects that I am getting from 2 different api calls(the example here is just a sample). How can I merge the UserId array of object and the userCredentials array together in the user state? I want the state to look like this user:[{id: 1, name"john", country="de"},{id: 2, name"micheal", country="us"}]

...
    import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      user: []
    };
  }
  componentDidMount() {
    //api call 1 receiving user Id and name
    const UserId = [{ id: 1, name: "john" }, { id: 2, name: "micheal" }];
    this.setState({ user: UserId });

    //api call 2 receiving userCredentials
    const userCredentials = [
      { id: 1, country: "de" },
      { id: 1, country: "us" }
    ];

    this.setState({
      user: { ...this.state.user, credentials: userCredentials }
    });
  }

  render() {
    console.log("values", this.state);
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    );
  }
}


...

my sample code is

https://codesandbox.io/s/fancy-water-5lzs1?file=/src/App.js:0-754

You can use array.concat(anotherArray) to merge two arrays together. — Nuwan.Niroshana
– Nuwan.Niroshana, Commented Jun 9, 2020 at 1:56

Guru Hadadi · Accepted Answer · 2020-06-09 02:21:39Z

4

Basically you need to map thru 1 array and find if each object in the array exists in another array and use spread operator and return the merged object in map callback

Working demo

Use the code below:

    // option 1 - if you know the keys of the object
    let merged = UserId.map(u => {
      const user = userCredentials.find(uc => uc.id === u.id);
      if (user) u["country"] = user.country;
      return u;
    });

    // option 2 - generic merge
    let merged2 = UserId.map(u => {
      const user = userCredentials.find(uc => uc.id === u.id);
      if (user) return { ...u, ...user };
      return u;
    });

answered Jun 9, 2020 at 2:21

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

1 Comment

Guru Hadadi Over a year ago

awesome... please consider to accept the answer if you like..

Nuwan.Niroshana · Accepted Answer · 2020-06-09 02:02:23Z

0

You could use 'array.concat([])' to merge two array objects together. See bellow example.

let UserId = [{ id: 1, name: "john" }, { id: 2, name: "micheal" }];
const userCredentials = [{ id: 1, country: "de" },{ id: 1, country: "us" }];

const newArray = UserId.concat(userCredentials);

Since you have defined UserId as a const you cannot change it. So you have to make it to let or var to modify the variable.

answered Jun 9, 2020 at 2:02

Nuwan.Niroshana

4071 gold badge4 silver badges15 bronze badges

4 Comments

death stranding Over a year ago

concat will basically merge all of them together and I will have a separate object of usercredentials. But I want to merge the credentials with the userId.

death stranding Over a year ago

can you do this change in the sandbox as I tried and it returned me a state with 4 arrays

Nuwan.Niroshana Over a year ago

Do you want this [{id: 1, name: "john", country: "de"}] ?

Nuwan.Niroshana Over a year ago

If so, you have to use array.map to construct new object in an array. This is already answered by gdh.

Collectives™ on Stack Overflow

Updating the values in an array of objects in react js

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related