title: simple ajax request with react.js
body: <p>Im trying to display any data from an ajax request, done inside react.js. so far no joy....</p>
  
  <p>its trying to pull data from a test web API, JQuery is installed, although not necessary, i have looked at alternatives, but struggled so far to implement them. </p>
  
  <p>For the request i am trying two things, to bind the data by this and with an append method from Jquery, both don't work. Everything else renders and the console is not spitting out any errors.</p>
  
  <p>I am trying to work towards a generic function that can easily be ported over for react-native, but im stuck even at this JQuery implementation. </p>
  
  <pre><code>var url = 'https://demo2697834.mockable.io/movies';
  
  //main logic
  var GetStuff= React.createClass({
  
      getInitialState: function() {
        return {
          entries: []
        };
      },
  
      componentDidMount: function() {
          $.ajax({
            url: 'https://demo2697834.mockable.io/movies',
            dataType: 'json',
            cache: false,
            success: function(data) {
              this.setState({entries: data});
              $('.test').append(data);
            }.bind(this),
            error: function(xhr, status, err) {
              console.error(this.props.url, status, err.toString());
            }.bind(this)
          });
        },
  
      render: function() {
        return (
          &lt;div&gt;{this.state.entries}&lt;/div&gt;
        );
      }
  });
  
  //markup
  &lt;body style={MainStyles.alldivs}&gt;
      &lt;Header /&gt;
      &lt;GetStuff/&gt;
      &lt;div class='test'&gt;&lt;/div&gt;
      {this.props.children}
      &lt;Footer /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Update 1</strong></p>
  
  <p>so i changed the properties to fit the entries declaration. No change, and i tried to pass in the props URL parameter, but no change either. I have also removed the old school JQuery append, im 100% trying to get on board with react, shame its not an easy segway transition. </p>
  
  <p>Do i need to change anything in the server config? i am using express? </p>
  
  <p><strong>Update 2</strong></p>
  
  <p>It' seems the componentDidMount function is not calling at all, to save confusion i will post my full code.</p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import $ from "min-jquery";
  import Header from './header';
  import Footer from './footer';
  //AJAX request
  var GetStuff= React.createClass({
      getInitialState: function() {
        return {
          entries: []
        };
      },
      componentDidMount: function() {
          $.ajax({
            url: 'https://demo2697834.mockable.io/movies',
            dataType: 'json',
            cache: false,
            success: function(data) {
              this.setState({entries: data});
              console.log('success');
            }.bind(this),
            error: function(xhr, status, err) {
              console.error(this.props.url, status, err.toString());
              console.log('fail');
            }.bind(this)
          });
        },
      render: function() {
        return (
          &lt;div&gt; HERE: 
            {this.state.entries}
          &lt;/div&gt;
        );
      }
  });
  
  
  // Stylesheet stuff is here, not important for this post.
  
  //Render
  var MasterLayout = React.createClass({ 
      render: function(){
          return(
              &lt;html lang="en"&gt;
              &lt;head&gt;
                  &lt;title&gt;{this.props.name}&lt;/title&gt;
              &lt;/head&gt;
              &lt;body style={MainStyles.alldivs}&gt;
                  &lt;Header /&gt;
                  &lt;GetStuff /&gt;
                  {this.props.children}
                  &lt;Footer /&gt;
              &lt;/body&gt;
              &lt;/html&gt;
          )   
      }
  });
  
  
  // no idea if this is the correct setup, again docs are lacking on the real use of this.
  
      if(typeof window !== 'undefined') {
          ReactDom.reder(&lt;MasterLayout /&gt;, document.getElementByID("content"));
      }
      module.exports = MasterLayout;
  </code></pre>