Uncaught TypeError: Cannot read property 'class function' of undefined in reactjs

Question

Error: Uncaught TypeError: Cannot read property 'manageChange' of undefined

I have bound the method to "this" as well. I have even tried the arrow function format to define "manageChange". It still does not work.

Please help out with identifying the issue? Code:

 class App extends React.Component {
  constructor() {
    super();
    this.state = { todos: TodoData };
    this.manageChange = this.manageChange.bind(this);
  }

  manageChange(id) {
    console.log(id);
  }

  render() {
    const todoItems = this.state.todos.map(function (item) {
      return (<TodoItem key={item.id} items={item}
        handleChange={this.manageChange} />);
    }
    );
    return
    (
      <div className="app">
        {todoItems}
      </div>
    );
  }
}

A.K.47 · Accepted Answer · 2019-05-30 08:49:12Z

2

The error is not in the definition of your manageChange function. It is instead in the below code

const todoItems=this.state.todos.map(function(item)
                {
                   return (<TodoItem key={item.id} items={item} 
                    handleChange={this.manageChange}/>);
                }
                );

You should change it to below and use arrow function instead like this

const todoItems=this.state.todos.map((item) => 
                {
                   return (<TodoItem key={item.id} items={item} 
                    handleChange={this.manageChange}/>);
                }
                );

Please note the difference in arrow function and normal function. The reference in the arrow functions is passed down to the children.

So when you define it like this; this keyword is passed as an reference of the class to this.manageChange and is not undefined.

answered May 30, 2019 at 8:49

A.K.47

2373 silver badges12 bronze badges

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

2 Comments

Shriprada S Over a year ago

thanks for the explanation. very new to ES6 and React and hence the confusion.

A.K.47 Over a year ago

Happy to help. You can read more on ES6 features here. http://es6-features.org.

Amit Chauhan · Accepted Answer · 2019-05-30 08:46:19Z

0

There is problem with map function. use arrow function in map. if you use normal function it will have it's own this which won't have manageChange function.

const todoItems=this.state.todos.map((item) =>
    {
                   return (<TodoItem key={item.id} items={item} 
                    handleChange={this.manageChange}/>);
    }
);

answered May 30, 2019 at 8:46

Amit Chauhan

7,0192 gold badges26 silver badges39 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read property 'class function' of undefined in reactjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related