title: Undefined Json in react
body: <p>I have (hopefully) a short question.
  I want to display values out of a json file in react. 
  Here is my code for the readJson.js file and the readJsonChild.js file.
  readJsons.js:</p>
  
  <pre><code>import React from 'react';
  import MyAppChild from './readJsonChild.js';
  import * as data from '../../model/data/ProductData/Material.json';
  
  export default class MyApp extends React.Component {
      render() {
        var json2 = data         
        var arr = [];
        Object.keys(json2).forEach(function(key) {
          arr.push(json2[key]);
        });
        return &lt;ul&gt;{arr.map(item =&gt; &lt;MyAppChild key={item.Name} Name={item.Name} Roughness={item.Roughness} Thickness={item.Thickness} /&gt;)}&lt;/ul&gt;;
      }
    }
  </code></pre>
  
  <p>readJsonChild.js:</p>
  
  <pre><code>import React from 'react';
  
  export default class MyAppChild extends React.Component {
      render() {
          return &lt;li&gt;{this.props.Name + " - " + this.props.Roughness + " - " + this.props.Thickness}&lt;/li&gt;;
  
      }
    }
  </code></pre>
  
  <p>My Json looks like this:</p>
  
  <pre><code>[
      {
      "Material":{
          "Name":"Test ",
          "Roughness":"12 ",
          "Thickness":"4234 ",
          "Conductivity":" ",
          "Specific Heat":" ",
          "Thermal Absorptance":" ",
          "Solar Absorptance":" ",
          "Visible Absorptance":" "
          }
      }
  ]
  </code></pre>
  
  <p>If I run the code I get three undefind values on the front end.
  If I integrate the JSON code directly into the readJson file it works.
  So, where is the problem?</p>