problem function is not being defined in react class based component

Question

I created a state and assigned a function to change the state using setState() and passed the function to a component but the function is not declared.

News.js:34 Uncaught (in promise) TypeError: this.setProgress is not a function at News.updateNews (News.js:34:1) at News.componentDidMount (News.js:50:1) at commitLayoutEffectOnFiber (react-dom.development.js:23305:1) at commitLayoutMountEffects_complete (react-dom.development.js:24688:1) at commitLayoutEffects_begin (react-dom.development.js:24674:1) at commitLayoutEffects (react-dom.development.js:24612:1) at commitRootImpl (react-dom.development.js:26823:1) at commitRoot (react-dom.development.js:26682:1) at finishConcurrentRender (react-dom.development.js:25981:1) at performConcurrentWorkOnRoot (react-dom.development.js:25809:1)

app.js

import './App.css';

import React, { Component } from 'react'
import NavBar from './components/NavBar';
import News  from './components/News';
import { BrowserRouter as Router,Routes,Route } from 'react-router-dom';
import LoadingBar from 'react-top-loading-bar'

export default class App extends Component {
state = {
      progress:0
    }
  
  setProgress=(progress)=>{
        this.setState({progress:progress});
  }
<Router>
<Routes>
<Route path="/" element={<News progress={this.setProgress} key="General" pageSize={this.pageSize} country={'in'} category={'General'}/>} exact/>
<Routes/>
<Router/>

News.js

import React, { Component } from "react";
import NewsItem from "./NewsItem";
import Spinner from "./Spinner";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";
export class News extends Component {
  async updateNews() {
    this.setProgress(10);
    const url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=05850f6a9b5842cdb656e413b672544a&page=${this.state.page}&pageSize=${this.props.pageSize}`;
    this.setState({ loading: true });
    let data = await fetch(url);
    this.props.setProgress(30);
    let parsedData = await data.json();
    this.props.setProgress(70);
    this.setState({
      articles: this.state.articles.concat(parsedData.articles),
      totalResults: parsedData.totalResults,
      loading:false
    });
    this.props.setProgress(100);
  }
}

this.setProgress and this.props.setProgress both are returning with same errors — Pratik Chitte, Jan 17 '23 at 19:38

score 0 · Answer 1 · answered Jan 18 '23 at 04:48

You should change the line

<Route path="/" element={<News progress={this.setProgress} key="General" pageSize={this.pageSize} country={'in'} category={'General'}/>} exact/>

to

<Route path="/" element={<News setProgress={this.setProgress} key="General" pageSize={this.pageSize} country={'in'} category={'General'}/>} exact/>

Also, in your News.js file, you should change the line

this.setProgress(10);

to

this.props.setProgress(10);

This way, you are passing the setProgress function correctly and also invoking it correctly in News.js file.

Also, you should use class properties syntax to define your state, instead of using the constructor, like this:

state = {
    progress:0
}

Hope this helps!

problem function is not being defined in react class based component

1 Answers1