how to fetch the data while pagination in ReactJS?

0
votes

What i am trying to solve is, pass the page value as a parameter while fetch the data. And also set the default pagination value is to "1".

endpoint-url: http://localhost:8000/api/blog_list?page=

api-data:

{
    "count": 3,
    "next": "http://localhost:8000/api/blog_list?page=2",
    "previous": null,
    "results": [
        {
            "id": 6,
            "url": "http://localhost:8000/api/blog_detail/test3",
            "title": "test3",
            "slug": "test3",
            "image": "http://localhost:8000/media/blog/author.jpg",
            "description": "test3",
            "created_on": "2020-05-13T13:36:45Z",
            "status": true,
            "category": [
                1
            ]
        },
        {
            "id": 10,
            "url": "http://localhost:8000/api/blog_detail/test3",
            "title": "Hamid",
            "slug": "test3",
            "image": "http://localhost:8000/media/blog/person_2_2beHkt1.jpg",
            "description": "test",
            "created_on": "2020-05-13T14:59:30.855849Z",
            "status": true,
            "category": [
                2
            ]
        }
    ]
}


./src/BlogList.js

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "",
      response: "",
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await fetch(
        `http://localhost:8000/api/blog_list?page=${value}`
      );
      const JsonResponse = await response.json();
      this.setState({ response: JsonResponse });
    } 
    catch (error) {
      console.log(error);
    }
  };

  render() {
    const { response } = this.state;

    if (!response) {
      return "Loading...";
    }

    return (
      <div>
        {response.results.map((response) =>(

            <div class="col-md-12">

                <h3> {response.title} </h3>

            </div>


        ))}
      </div>
    );
  }
}

export default App;
3
javascriptjsonreactjspaginationreact-component

3 Answers

1
votes

I believe one issue is that you are not using the the state in your fetch call. It should look like this instead.

const response = await fetch(
  `http://localhost:8000/api/blog_list?page=${this.state.value}`
);

And if you want to initialize the value in your state to be 1, then you can initialize your state like so:

this.state = {
  value: "1",
  response: "",
};
1
votes

I am not sure I understand your question properly, but if you'd like to add the state value as a parameter to this fetch you can pass the value by using string concatenation:

const response = await fetch( http://localhost:8000/api/blog_list?page=${value} );

http://localhost:8000/api/blog_list?page= + this.state.value

1
votes
fetchData = async () => {
const { value } = this.state
try {
  const response = await fetch(
    `http://localhost:8000/api/blog_list?page=${value}`
  );
  const JsonResponse = await response.json();
  this.setState({ response: JsonResponse });
} 
catch (error) {
  console.log(error);
}

};

"value" is not defined in fetchData