URL is not updating in React JS using setState

Please add the page in state at initial time.

Older code:

this.state = {
      articles: [],
      loading: false,
    };

Updated code:

this.state = {
      articles: [],
      loading: false,
      page: 1
    };

You must use componentDidUpdate() for interact with state did changed. so in this case i use component did update when the state.page did not same with prevState.page so if that condition is true then we tell the react component to update acording to the function inside componentDidUpdate(). I just create some code in below:

don't forget use spread operator or ... to keep previous state in our component. so when we update the state or setState its did'nt erase our previous state.

You can see adjusted code below:

import React, { Component } from "react";
import NewsItems from "./NewsItems";
import PreviousIcon from "@material-ui/icons/ArrowBack";
import NextIcon from "@material-ui/icons/ArrowForward";

export default class News extends Component {
  constructor() {
    super();

    this.state = {
      articles: [],
      loading: false,
      page: 1
    };
  }

  async componentDidMount() {
    let url =
      "https://newsapi.org/v2/top-headlines?country=in&apiKey=myapikey&page=1&pageSize=20";

    let data = await fetch(url);

    let parsedData = await data.json();
    this.setState({ ...this.state, articles: parsedData.articles });
  }

  async componentDidUpdate(_, prevState) {
   if (this.state.page !== prevState.page) {
        let url = `https://newsapi.org/v2/top-headlines? 
        country=in&apiKey=myapikey&page=${
        this.state.page
        }&pageSize=20`;

       let data = await fetch(url);

       let parsedData = await data.json();
       this.setState({
        ...this.state,
        articles: parsedData.articles,
       });
    }
  }

  handlePrev = async () => {
    console.log("previous");

    this.setState({
      ...this.state,
      page: this.state.page - 1,
    });
  };

  handleNext = async () => {
    console.log("Next");

    this.setState({
      ...this.state,
      page: this.state.page + 1,
    });
  };

  render() {
    return (
      <div className="news">
        <h1 className="head">SpiceHunt - Top headings</h1>
        <div className="news-items">
          {this.state.articles.map((element) => {
            return (
              <NewsItems
                key={element.url}
                title={element.title}
                description={element.description}
                img={element.urlToImage}
                tag={element.author}
                newsUrl={element.url}
              />
            );
          })}
        </div>
        <div className="pg-btn">
          <button
            className="page-btn"
            disabled={this.state.page <= 1}
            type="button"
            onClick={this.handlePrev}
          >
            <PreviousIcon /> Previous
          </button>
          <button className="page-btn" type="button" onClick={this.handleNext}>
            Next <NextIcon />
          </button>
        </div>
      </div>
    );
  }
}