title: React component returns empty doing foreach on JSON object
body: <p>I have a JSON object with multiple leves that I'm trying to iterate through to display like this, but I keep getting empty results. </p>
  
  <pre><code>&lt;div&gt;    
  Operation
      **Speed: Slow
      **Direction: Forward
      **Status: Moving
  &lt;/div&gt;
  &lt;div&gt;
  Detail
  **Type: Electric
  **Drivetrain: AWD
  &lt;/div&gt;
  </code></pre>
  
  <p>JSON object</p>
  
  <pre><code>    "operation": {
          "speed": "slow",
          "direction": "forward",
          "status": "moving"
        },
    "detail": {
      "type": "electric",
      "drivetrain": "AWD"
    }
  </code></pre>
  
  <p>The following works, but difficult to wrap each level in a DIV</p>
  
  <pre><code>    const Bompush = (obj) =&gt; {
          let output = []
  
          Object.keys(obj).forEach(key =&gt; {
              output.push(&lt;div key={key}&gt;{key}&lt;/div&gt;)
  
              Object.keys(obj[key]).forEach (value =&gt; {
                  output.push(&lt;div key={value}&gt;{value}&lt;/div&gt;)
  
              })
          })
  
          return output  
  }
  </code></pre>
  
  <p>This is the ideal way I'd like to do this but it returns empty</p>
  
  <pre><code>const Bom = (obj) =&gt; {
   return (
      &lt;div className="outerContainer"&gt;
          {
              Object.keys(obj).forEach((key, item) =&gt; { 
                  return (
                      &lt;div className="category" key={key}&gt;{key}
                          {                        
                          Object.keys(obj[key]).forEach (value =&gt; { 
                              return (&lt;div className="item" key={value}&gt;{value}&lt;/div&gt;); 
                          })
                          }
                      &lt;/div&gt;
                  );
              })
          }
      &lt;/div&gt;
    );  
  
   }
  </code></pre>
  
  <p>My React component</p>
  
  <pre><code>  export default class DiplayBom extends React.Component {
  
      render() {
  
          return (
          Bom(this.props.myValues)
          )
      }
  
  
    }
  </code></pre>