title: ReactJS state reset itself
body: <p>I am having a strange (to me) issue with my ReactJS code.
  I just started learning ReactJS so I might be doing something very stupid, but this is what's happening.</p>
  
  <p>Link to codepen: <a href="https://codepen.io/Scyleung/pen/XyVovg" rel="nofollow noreferrer">https://codepen.io/Scyleung/pen/XyVovg</a></p>
  
  <p>I am have this component like so</p>
  
  <pre><code>class LeaseData extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        id: null,
        ready: false,
        data: null,
        error: null,
      };
  
      this.update = this.update.bind(this);
      //this.getNewJson(1);
    }
  
    update(newID) {
      this.setState({
        id: newID,
        ready: false,
        data: null,
        error:null,
      });
      console.log("From Main: " + newID + " " + this.state.id);
      this.getNewJson(newID);
    }
  
    getNewJson(id) {
      let url = "https://hiring-task-api.herokuapp.com/v1/leases/"+id;
      fetch(url)
        .then(res =&gt; res.json())
        .then(
        (result) =&gt; {
          console.log(result);
          this.setState({
            ready: true,
            data: result
          });
        },
        (error) =&gt; {
          console.log("Error: " + error.message);
          this.setState({
            ready: true,
            error: error
          });
        }
      )
    }
  
    render() {
      if (this.state.error) {
        console.log("ERROR")
        return (
          &lt;div&gt;
            &lt;Form callback = {this.update}/&gt;
            Error: {this.state.error.message}
          &lt;/div&gt;);
      } else if (!this.state.ready) {
        console.log("Waiting")
        return (&lt;Form callback = {this.update}/&gt;);
      } else {
        console.log("Displaying")
        return (
          &lt;div&gt;
          &lt;Form callback = {this.update}/&gt;
          {this.state.data.rent}&lt;/div&gt;
        );
      }
    }
  }
  </code></pre>
  
  <p>I have a Form that calls update() when the user submit the form.</p>
  
  <p><strong>First issue</strong>, inside update() the console.log() always say this.state.id is null, even after submitting the form multiple times.</p>
  
  <p><strong>Second issue</strong>, <code>update()</code> should call <code>getNewJson()</code> that should set this.state.error, if an error happens in fetch. As much in <code>render()</code> it should <code>console.log("ERROR")</code>, which it does, so that's good. However immediately afterward it would go to <code>console.log("Waiting")</code> again. So maybe related to the first issue, since the state got reset.</p>
  
  <p><strong>Third issue</strong>, why am I getting an error on the fetch like 80% of the time?</p>
  
  <p>The strangest thing is, if I uncomment the <code>this.getNewJson(1)</code> in the constructor, all the problems disappears!!</p>