Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="//fb.me/react-0.13.1.js"></script>
<script src="http://sinonjs.org/releases/sinon-1.15.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html>
var ChildComp = React.createClass({
  getInitialState: function(){
    return {
      response: [{}]
    }
  },
  componentWillReceiveProps: function(nextProps){
    var fakeServer = sinon.fakeServer.create();
    fakeServer.autoRespond = true;
    fakeServer.autoRespondAfter = 300;
    var fakeResponse = [
      {
        id : nextProps.subscriptionId,
        order : {
          id : nextProps.subscriptionId
        }
      }
    ];
    fakeServer.respondWith(JSON.stringify(fakeResponse));
    $.ajax({
      type: 'GET',
      url: '/subscription',
      context : this,
      data: {
        subscriptionId: nextProps.subscriptionId //1
      },
      success: function(data) {
        response = JSON.parse(data);
        this.setState({response : response});
      }
    });
    fakeServer.restore();
  },
  render: function(){
      var listSubscriptions = this.state.response.map(function(index){
        if (index.id == null) return ("No response loaded yet");
        return (
          index.id + " " + index.order.id
        )
      });
      return (
        <div>
          {listSubscriptions}
        </div>
      ) 
  }
});
​
var Parent = React.createClass({
  getInitialState : function () {
    return({id : 1});
  },
  update : function () {
    this.setState({id : this.state.id + 1});
  },
  render : function () {
    return (
      <div>
        <ChildComp subscriptionId={this.state.id} />
        <br/>
        <button onClick={this.update}>Click to send new props to ChildComp</button>
      </div>
    );
  }
});
​
React.render(<Parent/>, document.body);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Mrparkerspro
0viewers