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
– Pratik Chitte, Commented Jan 17, 2023 at 19:38

Smit Gabani · Accepted Answer · 2023-01-18 04:48:22Z

0

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!

answered Jan 18, 2023 at 4:48

Smit Gabani

3602 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

problem function is not being defined in react class based component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related