title: Rendering json data in multiple react.js components
body: <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>