React component import static json file
<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>