Unable to render json data in ReactJS components

Question!

I am trying to show data from package.json in my ReactJS components. I have seen many answers on SO and tried to implement it. It is neither showing any data nor an error. This is package.json:

{
  "name":"Clark Kent",
  "job":"Superman"
}

This is my jsx:

var App = React.createClass({

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

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

    loadData: function(URL) {
      var that = this;
      $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        url: URL,
        success: function(response){
          that.showResults(response);
        }
      })
    },
    componentDidMount: function() {
      this.loadData("package.json");
    },

    render: function(){
      return(
        <div>
        <Component1 data={this.state.myData} />
        <Component2 data={this.state.myData}/>
        </div>
      )
    }
});
var Component1 = React.createClass({
    render: function () {
      return(
        <div>Name: {this.props.data.name}</div>
      )
    }
});

var Component2 = React.createClass({
    render: function () {
      return(
        <div>Job: {this.props.data.job}</div>
      )
    }
});

ReactDOM.render(<App/>, document.getElementById('container')); 


This video can help you solving your question :)
By: admin