News.js:16 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'state')

Question

I am getting error of** "News.js:16 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'state')"** when ever i am clicking on next button. error occur in URL of handle next click button event. its a news app in the next button i want to display page 2 of news enter image description here code of news component

import React, { Component } from "react";
import Newsitem from "./Newsitem";

export class News extends Component {
  constructor(props) {
    super(props);
  /* this.handleNextClick = this.handleNextClick.bind(this)
  this.handlePreviousClick = this.handlePreviousClick.bind(this) */
    this.state = {
      articles: [],
      loading: false,
      page:1
    };
  }
 async componentDidMount(){
    let url = `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey&page=${this.page.state+1}&pagesize=${this.props.pagesize}`;
    let data = await fetch(url);
    let parsedData = await data.json();
    console.log(parsedData);
    this.setState({articles: parsedData.articles,
                    totalresults:parsedData.totalresults });
  }
  handleNextClick =  async ()=>{
    console.log("next")
    if(!this.page.state + 1 > Math.ceil(this.state.totalresults/this.props.pagesize)){
    let url = `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey&page=${this.page.state+1}&pagesize=${this.props.pagesize}`;
    let data = await fetch(url);
    let parsedData = await data.json();
    console.log(parsedData);
    this.setState({page : this.state.page + 1 ,
      articles : parsedData.articles });
    }
  }
  handlePreviousClick = async()=>{
    console.log("Previous")
    let url = `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey&page=${this.page.state+1}&pagesize=${this.props.pagesize}`;
    let data = await fetch(url);
    let parsedData = await data.json()
    console.log(parsedData);
    this.setState({page: this.state.page - 1,
                articles: parsedData.articles})
  }
  render() {
    return (
      <div className="container my-4 ">
        <h1 className="text-center">NewsMonkey - TOP Headlines</h1>
        
        <div className="row">
          {this.state.articles.map((element)=>{
            return <div className="col-md-4" key={element.url}>
            <Newsitem  title = {element.title?element.title.slice(0,40):""} description={element.description?element.description.slice(0,80):""} imgUrl={element.urlToImage} newsUrl = {element.url}/>
          </div>
          })}
        </div>
        <div className="container d-flex justify-content-between" >
        <button type="button" disabled={this.state.page<=1}  className="btn btn-dark" onClick={this.handlePreviousClick}>   &larr; Previous</button>
        <button type="button" disabled={this.state.page+1>Math.ceil(this.state.totalresults/this.props.pagesize)}className="btn btn-dark" onClick={this.handleNextClick}>Next &rarr;</button>
        </div>
      </div>
    );
  }
}

i tried bind method but it does not work for my problem

Answer 1

The error is coming from this.page.state at line 16, it will also be issued by other links where there is this code.

Try replacing it with this.state.page

And please be very careful to not share ApiKey online as you are doing here by asking the question.