Objects getting the same ID

Question

I'm pulling data from a GraphQL backend. Here is the data that I'm pulling.

{
  "data": {
    "product": {
      "attributes": [
        {
          "id": "Capacity",
          "items": [
            {
              "id": "256GB",
              "displayValue": "256GB"
            },
            {
              "id": "512GB",
              "displayValue": "512GB"
            }
          ]
        },
        {
          "id": "With USB 3 ports",
          "items": [
            {
              "id": "Yes",
              "displayValue": "Yes"
            },
            {
              "id": "No",
              "displayValue": "No"
            }
          ]
        },
        {
          "id": "Touch ID in keyboard",
          "items": [
            {
              "id": "Yes",
              "displayValue": "Yes"
            },
            {
              "id": "No",
              "displayValue": "No"
            }
          ]
        }
      ]
    }
  }
}

I'm then iterating through the attributes array and giving unique IDs, _id to differentiate the different items. It turns out that the item that has an ID With USB 3 ports and Touch ID in keyboard always get the same ID. I'm using nanoid.

Here is the code

import { PureComponent } from "react";
import { useParams } from 'react-router-dom';
import { Query } from '@apollo/client/react/components';
import GET_PRODUCT from "../../graphql/getProduct";
import { nanoid } from 'nanoid';
import ProductDetailComponent from "./ProductDetailComponent";
import './ProductDetail.css'


class ProductDetail extends PureComponent {
  render() {
    const { id } = this.props.params;
    const { currency, addToCart, closeCurrencyOverlay } = this.props;
    return (
      
        {({ loading, data}) => {
          if (loading) return null;
          let newAttributes = [];
          data.product.attributes.map((attribute) => {
            attribute.items.map((item) => {
              item._id = nanoid(); // <-- Giving the id from here
            })
            newAttributes.push(attribute)
          })
          const newData = { ...data, attributes: newAttributes }
          return 
        }}
      
    )
  }

}

export default (props) => (
  
);

I'm just wondering why they always get the same ID.

Here is a screenshot of the Chrome dev tools

user_6754109 · Answer

If you are always getting the same id for the elements inside the items array and looking at your code where you assign item._id = nanoid(); it makes me think that those objects share the same reference.

Here is a quick example to illustrate why this would happen:

// reference of array values
const yesNoArr = [
  { id: 1, text: 'Yes' }, 
  { id: 2, text: 'No' }
];

const objs = [
  // here both objects share the same reference of "items" property:
  { items: yesNoArr, text: 'with USB 3 ports' },
  { items: yesNoArr, text: 'Touch Id in keyboard' }
];

// if at this point you try to set _id to items[0]:

objs[0].items[0]._id = 123; // this will work fine and assign _id = 123
objs[1].items[0]._id = 456; // but this will overwrite previous "123" by "456" because they point to the same object

// result:
console.log(JSON.stringify(objs, null, 2));

If you want to avoid this behavior you'll have to make a modified copy of the items so that they don't point to the same referenced object. Try replacing this piece of code and see how it behaves:

const newAttributes = data.product.attributes.map((attribute) => {
  return {
    ...attribute,
    items: attribute.items.map((item) => {
      // make a copy of each item to get a different reference:
      return {
        ...item,
        _id: nanoid(),
      };
    }),
  };
});

console.log(newAttributes);

Objects getting the same ID

1 Answers