Combining Array of Objects with another Object of Arrays After Component Mounts in React – Ebay API

I’m using eBay Api to update values for items i have stored in a database.

On my Favorites page, i’m displaying a user’s favorite items.

I have the user’s saved favorites which are loaded when the component mounts. The favorites data is an array of objects and looks like this:

{id: Array(1), title: Array(1), image: Array(1), itemURL: Array(1), price: 64, …}
{id: Array(1), title: Array(1), image: Array(1), itemURL: Array(1), price: 24, …}
{id: Array(1), title: Array(1), image: Array(1), itemURL: Array(1), price: 8, …}
{id: Array(1), title: Array(1), image: Array(1), itemURL: Array(1), price: 392, …}
{id: Array(1), title: Array(1), image: Array(1), itemURL: Array(1), price: 1501, …}

Based on the id’s from the favorites array above, i’m sending an API call to generate updated data for the statically saved variables such as bids, price etc. This data is saved in an object called cards..here is an example of data format:

cards: "[{"id":"143204954724","title":"1939-46 Salutation Exhibit,Hubbell,NY Giants,SGC70,HOF","price":64.99,"bidCount":0,"status":"Active","timeLeft":"P24DT9H1S"},

I need to create a combined array on page load while also updating whenever the page is refreshed or updated–that matches up ID’s from both arrays.

For example, if an item from favorites array contains the ID 344, I need to match that to the cards object and replace the data in favorites with data from cards object.

So if a favorite item looks like this:

{id: 344, link: google.com, title: "Awesome Sauce", price: 64, bids: 30}

and the same item in cards looks like this:

{id: 344, bids: 34, price: 75}

then i need the two to converge to an updated item like so:

{id: 344, link: google.com, title: "Awesome Sauce", price: 75, bids: 34}

Should I map through the favorites array and match to the cards object and just insert the new values? While also creating a hook to call this mapping? I sort of think that’s what I need to do, but I’m not exactly sure where to start.

UPDATE–this is what i’m trying

const combineData = (favorites, favUpdates) => {
    const finalArray = [];
    const data = Array.from(favorites);
    console.log("DATA", favorites);
    data.forEach(item1 =>
      favUpdates.forEach(item2 => {
        if (item1.id === item2.id)
          finalArray.push(item2, item1.image, item1.itemURL);
      })
    );
    console.log("Final Array", finalArray);
  };

I added an additional effect hook like this but when i console log finalArray it’s empty. I think it must be that the data its using isn’t loaded yet (i think?)

const Favorites = props => {
  useEffect(() => {
    props.getFavorites(props.loggedUser.id);
  }, [props.loggedUser.id]);

  useEffect(() => {
    setData(props.cardsToShow);
  }, [props]);

  const mapFAVS = props.favorites;
  const data = Array.from(mapFAVS);
  const updatedFavs = data.map(item => item.id);
  const formatFavs = updatedFavs.map(id => id.join(","));

  useEffect(() => {
    props.getUpdates(formatFavs);
  }, [props.favorites]);

  useEffect(() => {
    combineData(props.favorites, props.favUpdates);
  }, []);