Rendering json data in multiple react.js components
<p>I want to fetch some values from a json file and render them in multiple components. This code doesn't seem to work. Please suggest any changes. probably there are some issues with scope.</p>

<pre><code>var App = React.createClass({

    getInitialState: function(){
      return { myData: [] }

    },
    showResults: function(response){
        this.setState(
          {myData: response}
          )
    },

    loadData: function(URL) {
      $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        url: URL,
        success: function(response){
          this.showResults(response)
        }.bind(this)
      })
    },

    render: function(){
      this.loadData("fileLocation/sample.json");
      return(
        &lt;div&gt;
        {myData.key1}
        &lt;Component1 value={myData.key2} /&gt;
        &lt;Component2 value={myData.array[0].key3}/&gt;
        &lt;/div&gt;
      )
    }
  });

  var Component1 = React.createClass({
    render: function () {
      return(
        &lt;div&gt;{this.props.value}&lt;/div&gt;
      )
    }
  });

  var Component2 = React.createClass({
    render: function () {
      return(
        &lt;div&gt;{this.props.value}&lt;/div&gt;
      )
    }
  });
  ReactDOM.render(&lt;App/&gt;, document.getElementById('content'));
</code></pre>

<p>This is sample.json file I'm trying to fetch from. Even this shows a syntax error</p>

<pre><code>{
  key1:"value1",
  key2:"value2",
  array: [
    {key3:"value3"},
    {key4:"value4"}
  ]
}
</code></pre>