React function - is not defined no-undef

Question

I get the following error when trying to compile my app 'handleProgress' is not defined no-undef .

I'm having trouble tracking down why handleProgress is not defined.

Here is the main react component

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progressValue: 0,
    };

    this.handleProgress = this.handleProgress.bind(this);
  }

  render() {
    const { questions } = this.props;
    const { progressValue } = this.state;
    const groupByList = groupBy(questions.questions, 'type');
    const objectToArray = Object.entries(groupByList);



    handleProgress = () => {
      console.log('hello');
    };

    return (
      <>
        <Progress value={progressValue} />
        <div>
          <ul>
            {questionListItem && questionListItem.length > 0 ?
              (
                <Wizard
                  onChange={this.handleProgress}
                  initialValues={{ employed: true }}
                  onSubmit={() => {
                    window.alert('Hello');
                  }}
                >
                  {questionListItem}
                </Wizard>
              ) : null
            }
          </ul>
        </div>
      </>
    );
  }
}

Answer 1

Your render method is wrong it should not contain the handlePress inside: You are calling handlePress on this so you should keep it in the class.

     class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progressValue: 0,
    };

    this.handleProgress = this.handleProgress.bind(this);
  }


    handleProgress = () => {
      console.log('hello');
    };


  render() {
    const { questions } = this.props;
    const { progressValue } = this.state;
    const groupByList = groupBy(questions.questions, 'type');
    const objectToArray = Object.entries(groupByList);
    return (
      <>
        <Progress value={progressValue} />
        <div>
          <ul>
            {questionListItem && questionListItem.length > 0 ?
              (
                <Wizard
                  onChange={this.handleProgress}
                  initialValues={{ employed: true }}
                  onSubmit={() => {
                    window.alert('Hello');
                  }}
                >
                  {questionListItem}
                </Wizard>
              ) : null
            }
          </ul>
        </div>
      </>
    );
  }
}

Answer 2

handleProgress should not be in the render function, Please keep functions in you component itself, also if you are using ES6 arrow function syntax, you no need to bind it on your constructor.

Please refer the below code block.

  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        progressValue: 0,
      };
      // no need to use bind in the constructor while using ES6 arrow function. 
      // this.handleProgress = this.handleProgress.bind(this);
    }
    // move ES6 arrow function here. 
    handleProgress = () => {
      console.log('hello');
    };
    render() {
      const { questions } = this.props;
      const { progressValue } = this.state;
      const groupByList = groupBy(questions.questions, 'type');
      const objectToArray = Object.entries(groupByList);

      return (
        <>
          <Progress value={progressValue} />
          <div>
            <ul>
              {questionListItem && questionListItem.length > 0 ?
                (
                  <Wizard
                    onChange={this.handleProgress}
                    initialValues={{ employed: true }}
                    onSubmit={() => {
                      window.alert('Hello');
                    }}
                  >
                    {questionListItem}
                  </Wizard>
                ) : null
              }
            </ul>
          </div>
        </>
      );
    }
  }

Answer 3

If you are using handleProgress inside render you have to define it follows.

const handleProgress = () => {
      console.log('hello');
    };

if it is outside render and inside component then use as follows:

handleProgress = () => {
      console.log('hello');
    };

If you are using arrow function no need to bind the function in constructor it will automatically bind this scope.

Answer 4

Try this one, I have check it on react version 16.8.6

We don't need to bind in new version using arrow head functions. Here is the full implementation of binding argument method and non argument method.

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <button onClick={this.updateCounter}>NoArgCounter</button>
        <button onClick={() => this.updateCounterByArg(this.state.count)}>ArgCounter</button>
        <span>{this.state.count}</span>
      </div>
    );
  }

  updateCounter = () => {
    let { count } = this.state;
    this.setState({ count: ++count });
  };

  updateCounterByArg = counter => {
    this.setState({ count: ++counter });
  };
}

export default Counter;