react - json from url not loading

- 1 answer

Ad

I have the following code that is returning a blank page and I don't know why. There's no error but looking in the sources I can see the API data is not loading from the URL. -

var WGListList = React.createClass({
  render: function() {
    var wglistNodes = this.props.data.map(function(wglist) {
      return (
        <WGList name={wglist.name} key={wglist.id} />
      );
    });
    return (
      <div className="wglistList">
        {wglistNodes}
      </div>
    );
  }
});

var App = React.createClass({
  loadWGListsFromServer: function() {
    $.ajax({
      url: "http://server/api/widgetlists/?format=json",
      pollInterval: 2000,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadWGListsFromServer();
    setInterval(this.loadWGListsFromServer, this.pollInterval);
  },
  render: function() {
    return (
      <div className="wglistBox">
        <h1>Widget Lists</h1>
        <WGListList data={this.state.data} />
      </div>
    );
  }
});

var WGList = React.createClass({
  render: function() {
    return (
      <div className="wglist">
        <h2 className="wglistName">
          {this.props.name}
        </h2>
      </div>
    );
  }
});

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

If I change

url: this.props.url,
pollInterval: this props.pollInterval

and do this -

ReactDOM.render(
  <App url="http://server/api/widgetlists/?format=json" pollInterval={2000} />,
  document.getElementById('content')
);

it works.

hmmm... still new to javascript. Issue seems to be how I'm naming components. If I change App back to WGListBox in both instances which is similar to the tutorial it works. Those are the only two references to that line though, where else is it persisting?

Ad

Answer

Ad

ok so learned the issue is that apparently javascript has issues with beginning variables with lowercass. I actually had one named wgApp later in my code snipped and that was what was breaking it. I renamed to WGApp and worked fine.

Ad
source: stackoverflow.com
Ad