How can I solve "_this is undefined" in React?

Question

Was following this tutorial to make a simple todo app (https://hackernoon.com/create-a-simple-todo-app-in-react-9bd29054566b).

Thing is I've encountered this error:

TypeError: _this is undefined

Referencing to when I delete using onClick in the following component:

import React, {Component} from 'react'

class TodoItems extends Component {

    createTasks(item) {
        return (
            <li key={item.key} onClick={() => this.props.deleteItem(item.key)}>
                {item.text}
            </li>
        )
    }
    render() {
        const todoEntries = this.props.entries
        const listItems = todoEntries.map(this.createTasks)

        return <ul className="theList">{listItems}</ul>
    }
}

export default TodoItems

I have seen that I might have to use .bind(this) in the constructor but I'm not really sure how to apply this here.

Here's is the segment of App.js where deleteItem is defined and TodoItems is called:

    deleteItem = key => {
        const filteredItems = this.state.items.filter(item => {
            return item.key !== key
        })
        this.setState({
            items: filteredItems,
        })
    }
    inputElement = React.createRef()
    render() {
    return (
        <div className="App">
            <TodoList
                addItem={this.addItem}
                inputElement={this.inputElement}
                handleInput={this.handleInput}
                currentItem={this.state.currentItem}
            />
            <TodoItems entries={this.state.items} deleteItem={this.deleteItem}/>
        </div> //App
    )
  }

Thanks in advance for any help!

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Estus Flask, Dec 05 '18 at 08:20
can you try once deleteItem={this.deleteItem} => ```deleteItem={() => this.deleteItem }``` — Suprabha, Dec 05 '18 at 08:27

Angelki · Answer 1 · 2018-12-05T09:41:35.297

If you don't know why...

The bodies of class declarations and class expressions are executed in strict mode, that is the constructor, static and prototype methods. Getter and setter functions are executed in strict mode.

In Class Components in React, when we pass the event handler function reference as a callback like this

<button type="button" onClick={this.handleClick}>Click Me</button>

Click Me the event handler method loses its implicitly bound context. When the event occurs and the handler is invoked, the this value falls back to default binding and is set to undefined , as class declarations and prototype methods run in strict mode.

When we bind the this of the event handler to the component instance in the constructor, we can pass it as a callback without worrying about it losing its context.

Arrow functions are exempt from this behavior because they use lexical this binding which automatically binds them to the scope they are defined in.

This is why we need to bind event handlers in Class Components in React

Class MDN

score 2 · Answer 2 · answered Dec 05 '18 at 08:25

2

You can either use Fat arrow function

deleteItem={()=>{this.deleteItem()}}

which supports in ES6.

OR

You can also .bind(this) in constructor.

Eg.

constructor(props){
    super(props);
    this.deleteItem = this.deleteItem.bind(this)
}

answered Dec 05 '18 at 08:25

Ojas Patharkar

101
4

score 1 · Accepted Answer · answered Dec 05 '18 at 08:19

1

this.createTasks method is used as a callback. It should be bound to proper context in order to use this.

It should be either:

createTasks = (item) => {...}

Or

createTasks = this.createTasks.bind(this);

createTasks(item) {...}

answered Dec 05 '18 at 08:19

Estus Flask

206,104
70
425
565

score 0 · Answer 4 · answered Dec 05 '18 at 08:25

0

constructor(){
  this.createTasks = this.createTasks.bind(this);
}

You can use ES6, with proper Babel configuration to make it simpler, and remove the need for the constructor() cycle. follow this tutorial.

answered Dec 05 '18 at 08:25

Sultan H.

2,908
2
11
23

score 0 · Answer 5 · answered Apr 27 '23 at 16:02

Documenting here for someone who might be using Redux as I was using, and erroneously setting a reducer field by referring to this. Something like this -

case UPDATE_CURR_PAGE:
    return {
      ...state,
      currPg: this.action.payload
    }

This this in the this.action.payload was the culprit for me. Easy to miss and vague to debug.

How can I solve "_this is undefined" in React?

5 Answers5