title: React component import static json file
body: <p>I am importing a json file like this:</p>
  
  <pre><code>import React from 'react';
  import Test1 from './test1.jsx';
  import data from './data.json';
  
  
  class TestWrapper extends React.Component {
    render () {
      return (
        &lt;div&gt;
          &lt;h2&gt;Projects&lt;/h2&gt;
          &lt;Test1 projects={data} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default TestWrapper;
  </code></pre>
  
  <p>which I am then try to use it in:</p>
  
  <pre><code>import React from 'react';
  
  class Test1 extends React.Component {
    render () {
      var rows = [];
      this.props.projects.map(function(el){
         rows.push(&lt;p key={el}&gt;{el}&lt;/p&gt;);
      });
      return (
        &lt;div&gt;
          &lt;h2&gt;Test 1&lt;/h2&gt;
          {rows}
        &lt;/div&gt;
      );
    }
  }
  
  export default Test1;
  </code></pre>
  
  <p>this is my data.json</p>
  
  <pre><code>{
    "projects": [
      "title1",
      "title2",
      "title3",
      "title4"
    ]
  }
  </code></pre>
  
  <p>I am getting the following error:</p>
  
  <p>Uncaught TypeError: this.props.projects.map is not a function</p>
  
  <p>do I need to parse my json file?</p>