ReactJS state reset itself

Question

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.

Link to codepen: https://codepen.io/Scyleung/pen/XyVovg

I am have this component like so

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 => res.json())
      .then(
      (result) => {
        console.log(result);
        this.setState({
          ready: true,
          data: result
        });
      },
      (error) => {
        console.log("Error: " + error.message);
        this.setState({
          ready: true,
          error: error
        });
      }
    )
  }

  render() {
    if (this.state.error) {
      console.log("ERROR")
      return (
        <div>
          <Form callback = {this.update}/>
          Error: {this.state.error.message}
        </div>);
    } else if (!this.state.ready) {
      console.log("Waiting")
      return (<Form callback = {this.update}/>);
    } else {
      console.log("Displaying")
      return (
        <div>
        <Form callback = {this.update}/>
        {this.state.data.rent}</div>
      );
    }
  }
}

I have a Form that calls update() when the user submit the form.

First issue, inside update() the console.log() always say this.state.id is null, even after submitting the form multiple times.

Second issue, update() should call getNewJson() that should set this.state.error, if an error happens in fetch. As much in render() it should console.log("ERROR"), which it does, so that's good. However immediately afterward it would go to console.log("Waiting") again. So maybe related to the first issue, since the state got reset.

Third issue, why am I getting an error on the fetch like 80% of the time?

The strangest thing is, if I uncomment the this.getNewJson(1) in the constructor, all the problems disappears!!

Answer 1

The main issue I assume is that onSubmit does what you want but then reloads the page cancelling the request. What you need to do to prevent this is to call e.preventDefault() after calling the callback function.

Changing your onSubmit to something like this should fix the main issue

onSubmit = {(e) => {
    this.props.callback(this.state.value);
    e.preventDefault();
}}

https://codepen.io/anon/pen/QJaeyY

Secondly, to get the error from fetch, you should use .catch() instead of the second callback function in then() as this is the proposed syntax and should work with most browsers.