title: How to understand the error "TypeError: Cannot read property 'id' of undefined"?
body: <p>I'm trying to understand basic concept here. I know this is a common problem and pretty sure there's a simple explanation which I don't seem to get. Here I'm trying to access the different properties of my object which I'm unable to do so.</p>
  
  <p>Below is my array output using <code>console.log(val);</code> </p>
  
  <p><img src="https://i.stack.imgur.com/qxV5H.png" alt="browser output of this console"></p>
  
  <p>When I try this <code>console.log(val[0]);</code> the output is:</p>
  
  <p><img src="https://i.stack.imgur.com/cpHSd.png" alt="here"> </p>
  
  <p>Just getting first object in that array.</p>
  
  <p>Now if I try <code>console.log(val[0].id);</code> I get:</p>
  
  <p><img src="https://i.stack.imgur.com/yKIBX.png" alt="this error">  </p>
  
  <p>Also checked for keys using<code>console.log(Object.keys(val));</code> and stringify using <code>console.log(JSON.stringify(val[0]));</code> </p>
  
  <p><img src="https://i.stack.imgur.com/hYbZo.png" alt="shown here"> </p>
  
  <p>But if I try the exact same processes in chrome console, I get what I need shown </p>
  
  <p><img src="https://i.stack.imgur.com/kfroL.png" alt="HERE">  </p>
  
  <p>This is a React application. I've tried this in VS Code and PyCharm editors as well. I'm sure I'm missing something simple.</p>
  
  <h2>Update</h2>
  
  <p>I have added my data and steps taken to arrive a the problem.  </p>
  
  <pre><code>"variants": [
    {
      "id": 6989569458233,
      "price": "68.00",
      "option1": "color-1",
      "option2": "32",
      "inventory_quantity": 764
    },
    {
      "id": 6989569491001,
      "price": "68.00",
      "option1": "color-1",
      "option2": "32F",
      "inventory_quantity": 158
    },
    {
      "id": 4615727513637,
      "price": "68.00",
      "option1": "color-1",
      "option2": "34D",
      "inventory_quantity": 5
    },
    {
      "id": 4615727906853,
      "price": "68.00",
      "option1": "color-1",
      "option2": "38E",
      "inventory_quantity": 6
    },
    {
      "id": 6989722583097,
      "option1": "color-2",
      "option2": "32E",
      "price": "68.00",
      "inventory_quantity": 1109
    },
    {
      "id": 6989722615865,
      "option1": "color-2",
      "option2": "32F",
      "price": "68.00",
      "inventory_quantity": 1109
    },
    {
      "id": 4615861469221,
      "price": "68.00",
      "option1": "color-2",
      "option2": "34D",
      "inventory_quantity": 1797
    },
    {
      "id": 6989722648633,
      "price": "68.00",
      "option1": "color-2",
      "option2": "34E",
      "inventory_quantity": 0
    },
    {
      "id": 6989722648633,
      "price": "68.00",
      "option1": "color-2",
      "option2": "34F",
      "inventory_quantity": 100
    },
    {
      "id": 6989459193913,
      "price": "68.00",
      "option1": "color-3",
      "option2": "32E",
      "inventory_quantity": 300
    },
    {
      "id": 6989459226681,
      "price": "68.00",
      "option1": "color-3",
      "option2": "32F",
      "inventory_quantity": 320
    },
    {
      "id": 6989459292217,
      "price": "68.00",
      "option1": "color-3",
      "option2": "34F",
      "inventory_quantity": 264
    },
    {
      "id": 4615725842469,
      "price": "68.00",
      "option1": "color-4",
      "option2": "32E",
      "inventory_quantity": 214
    },
    {
      "id": 4615725908005,
      "price": "68.00",
      "option1": "color-4",
      "option2": "34D",
      "inventory_quantity": 133
    },
    {
      "id": 4615725973541,
      "price": "68.00",
      "option1": "color-4",
      "option2": "34F",
      "inventory_quantity": 891
    },
    {
      "id": 6989673398329,
      "price": "68.00",
      "option1": "color-5",
      "option2": "32E(DD)",
      "inventory_quantity": 98
    },
    {
      "id": 6989673431097,
      "price": "68.00",
      "option1": "color-5",
      "option2": "32F",
      "inventory_quantity": 98
    },
    {
      "id": 6989673463865,
      "option1": "color-5",
      "option2": "34D",
      "inventory_quantity": 8
    },
    {
      "id": 6989673496633,
      "price": "68.00",
      "option1": "color-5",
      "option2": "34E",
      "inventory_quantity": 348
    }
  ]  
  </code></pre>
  
  <p>using <strong>lodash</strong> to group in my class component shown below. Here is pass </p>
  
  <p><code>input</code> which is 'color-1', 'color-2',..   </p>
  
  <p><strong>product-detail.js</strong></p>
  
  <pre><code>export default class ProductDetail extends Component {
  constructor(props) {
      super(props)
      console.log('props -- ', props);
  
      this.state = {
          color: 'color-1',
          stock: ''
      }
  }
  
  
  groupBy(input) {
      const groupByColor = _(this.props.variants)
                          .groupBy(x =&gt; x.option1)
                          .map((value, key) =&gt; ({ color: key, details: value }))
                          .value();
  }  
  </code></pre>
  
  <p>Using the <code>groupBy</code>function I'm using this in my <code>render()</code> shown below. Basically trying to extract data using bunch of console outputs shown below just to test. Hope this helps reproduce the issue.</p>
  
  <pre><code>render() {
      const val = this.groupBy(this.state.color);
      console.log(val);
      console.log(val[0]);
      console.log(Object.keys(val));
      console.log(JSON.stringify(val[0]));
  </code></pre>