title: Objects getting the same ID
body: <p>I'm pulling data from a GraphQL backend. Here is the data that I'm pulling.</p>
  <pre><code>{
    &quot;data&quot;: {
      &quot;product&quot;: {
        &quot;attributes&quot;: [
          {
            &quot;id&quot;: &quot;Capacity&quot;,
            &quot;items&quot;: [
              {
                &quot;id&quot;: &quot;256GB&quot;,
                &quot;displayValue&quot;: &quot;256GB&quot;
              },
              {
                &quot;id&quot;: &quot;512GB&quot;,
                &quot;displayValue&quot;: &quot;512GB&quot;
              }
            ]
          },
          {
            &quot;id&quot;: &quot;With USB 3 ports&quot;,
            &quot;items&quot;: [
              {
                &quot;id&quot;: &quot;Yes&quot;,
                &quot;displayValue&quot;: &quot;Yes&quot;
              },
              {
                &quot;id&quot;: &quot;No&quot;,
                &quot;displayValue&quot;: &quot;No&quot;
              }
            ]
          },
          {
            &quot;id&quot;: &quot;Touch ID in keyboard&quot;,
            &quot;items&quot;: [
              {
                &quot;id&quot;: &quot;Yes&quot;,
                &quot;displayValue&quot;: &quot;Yes&quot;
              },
              {
                &quot;id&quot;: &quot;No&quot;,
                &quot;displayValue&quot;: &quot;No&quot;
              }
            ]
          }
        ]
      }
    }
  }
  </code></pre>
  <p>I'm then iterating through the <code>attributes</code> array and giving unique IDs, <code>_id</code> to differentiate the different <code>items</code>. It turns out that the <code>item</code> that has an ID <code>With USB 3 ports</code> and <code>Touch ID in keyboard</code> always get the same ID. I'm using nanoid.</p>
  <p>Here is the code</p>
  <pre><code>import { PureComponent } from &quot;react&quot;;
  import { useParams } from 'react-router-dom';
  import { Query } from '@apollo/client/react/components';
  import GET_PRODUCT from &quot;../../graphql/getProduct&quot;;
  import { nanoid } from 'nanoid';
  import ProductDetailComponent from &quot;./ProductDetailComponent&quot;;
  import './ProductDetail.css'
  
  
  class ProductDetail extends PureComponent {
    render() {
      const { id } = this.props.params;
      const { currency, addToCart, closeCurrencyOverlay } = this.props;
      return (
        &lt;Query
          key=&quot;yes&quot;
          query={GET_PRODUCT}
          variables={{ id }}
          fetchPolicy=&quot;network-only&quot;
        &gt;
          {({ loading, data}) =&gt; {
            if (loading) return null;
            let newAttributes = [];
            data.product.attributes.map((attribute) =&gt; {
              attribute.items.map((item) =&gt; {
                item._id = nanoid(); // &lt;-- Giving the id from here
              })
              newAttributes.push(attribute)
            })
            const newData = { ...data, attributes: newAttributes }
            return &lt;ProductDetailComponent data={newData} currency={currency} addToCart={addToCart} closeCurrencyOverlay={closeCurrencyOverlay} id={id}/&gt;
          }}
        &lt;/Query&gt;
      )
    }
  
  }
  
  export default (props) =&gt; (
    &lt;ProductDetail
      {...props}
      params={useParams()}
    /&gt;
  );
  </code></pre>
  <p>I'm just wondering why they always get the same ID.</p>
  <p>Here is a screenshot of the Chrome dev tools
  <a href="https://i.stack.imgur.com/Zfl0e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zfl0e.png" alt="Dev tools" /></a></p>