React : Uncaught (in promise) Error: Request failed with status code 400

Question

I am using ReactJS, I want to create pagination for my application . When I click on next button I got this error Uncaught (in promise) Error: Request failed with status code 400 . I am fetching page data through API which were built in Loopback. Can someone please help me how to solve this problem because I am new and didn't much know about ReactJS

Code

        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Solution

Your btnClick function:

btnClick(e) {
  const id = e.target.value;
  this.setState({
       id: id+1
    },
    () => this.getData()
  )
}

Is not going to work. e.target.value is undefined in a button and, when doing undefined + 1, you'll receive an NaN.

I believe you want to retrieve the id from the state. Which would make your function like so:

btnClick(e) {
  const { id } = this.state;
  this.setState({
       id: id+1
    },
    () => this.getData()
  )
}

Or you might want to derive your setState call from your current state, like so (and I also removed the not needed arrow function declaration):

btnClick(e) {
  this.setState(({ id }) => ({
       id: id+1
    }),
    this.getData
  )
}

Finally, you could do a sanity check on your getData function to make sure that this.state.id is actually a number -- you could use Number.isNaN().

Comments

[Shawn Yap]

Your initial id is 10, are you trying to get id+1 every time you hit the next button? It seems like your btnClick func is getting the value from Pagination component instead. Don't think there's a value at e.target.value.

[Jon]

Actually I want to to load data 10-20 on second click but problem is I am not able to load data

[Jon]

Thank You for your comment . I want to show 10 entries on first page when user click on next it will show another 10 entries , first 10 entries will be skipped . It possible through loopback pagination. I did manual it working but I am not able to do it in react