title: React class component with nested map() to display data
body: <p>How to display the data in the class component which has nested map() methods?</p>
  
  <p>Below is the data structure.</p>
  
  <h2>data.js</h2>
  
  <pre><code>const items =
  {
      "label": "DTR-01",
      "row": [
          {
              "level": 1,
              "locations": [
                  {
                      "name": "DTR-01-01",
                      "stock": [
                          {
                              "product": "Battery Drill",
                              "qty": 100,
                              "replenishment": "slow"
                          }
                      ]
                  }
              ]
          },
          {
              "level": 2,
              "locations": [
                  {
                      "name": "DTR-01-02",
                      "stock": []
                  },
                  {
                      "name": "DTR-02-02",
                      "stock": [
                          {
                              "product": "Angle Grinder",
                              "qty": 3,
                              "replenishment": "fast"
                          }
                      ]
                  }
              ]
          },
          {
              "level": 3,
              "locations": [
                  {
                      "name": "DTR-01-03",
                      "stock": [
                          {
                              "product": "Skill Saw",
                              "qty": 2,
                              "replenishment": "standard"
                          }
                      ]
                  },
                  {
                      "name": "DTR-01-04",
                      "stock": [
                          {
                              "product": "Hammer Drill",
                              "qty": 10,
                              "replenishment": "standard"
                          }
                      ]
                  }
              ]
          }
      ]
  };
  
  export default items;
  </code></pre>
  
  <p>Have the component set up which is currently returning the Objects, 3 in number.</p>
  
  <p>The class component below.</p>
  
  <h2>LocalData.js</h2>
  
  <pre><code>import React, {Component} from 'react';
  import items from '../data/data';
  
  class LocalData extends Component {
      constructor(props) {
          super(props);
          this.state = {
              items: items
          };
      }
  
      render() {
          const {items} = this.state;
          return (
              &lt;div&gt;
                  {
                      Object.keys(items.row).map(level =&gt; {
                          return (&lt;div key={level}&gt;{level}&lt;/div&gt;)
                      })
                  }
              &lt;/div&gt;
          );
      }
  }
  
  export default LocalData;
  </code></pre>
  
  <p>I would need to nest other map() methods to display the data in the component? I have tried nesting the map() methods but end up with errors.</p>