Getting undefined error in React even though function is bound

Question

I have bound this handleRemove in the constructor but the below code does not work for some reason

handleRemove()
  {
    //console.log(e.target.value)
    console.log('click')
  }

<button key={index} onClick={this.handleRemove}>X</button>

The error I get:

TypeError: Cannot read property 'handleRemove' of undefined

Even when I remove binding and use arrow functions, () => this.handleRemove(), I get the same error. Anyone have a solution?

The full component:

class ScheduleList extends Component
{
  constructor(props)
  {
    super(props);

    this.state = {
      "actions": [],
      "thingsDue" : []
    }

    this.componentDidUpdate = this.componentDidUpdate.bind(this);
    this.componentDidMount = this.componentDidMount.bind(this);
    //this.handleRemove = this.handleRemove.bind(this);
    
  }

  componentDidMount(e)
  {
    fetch("http://localhost:5000/backend/" + this.props.date).then(res => res.json()).then(resjson => {
      this.setState({actions: JSON.parse(resjson)})
      }).catch(err => console.log(err))

      fetch("http://localhost:5000/backend/due/" + this.props.date).then(res => res.json()).then(resjson => {
      this.setState({thingsDue: JSON.parse(resjson)})
      }).catch(err => console.log(err)) 
  }
  
  componentDidUpdate(prevProps) {
    if (this.props.date !== prevProps.date) 
    {
      fetch("http://localhost:5000/backend/" + this.props.date).then(res => res.json()).then(resjson => {
      this.setState({actions: JSON.parse(resjson)})
      }).catch(err => console.log(err))

      fetch("http://localhost:5000/backend/due/" + this.props.date).then(res => res.json()).then(resjson => {
      this.setState({thingsDue: JSON.parse(resjson)})
      }).catch(err => console.log(err)) 
    }
  }

  handleRemove()
  {
    //console.log(e.target.value)
    console.log('click')
  }

  render()
  {
    let listItems = this.state.actions.map((dic, index) => <li key={index}>{"From " + dic.start.toString() + " - " + dic.end.toString() + ": " +  dic.activity}</li>)
    listItems = listItems.map(function(elem, index) {
      return [elem, <button key={index} onClick={() => this.handleRemove()}>X</button>]
    })

    let dueItems = this.state.thingsDue.map((dic, index) => <li key={index}>{dic.thing_due}</li>)

    let timeSpent = 0;
    for(var index = 0; index < this.state.actions.length; index++)
    {
      timeSpent += (this.state.actions[index].end - this.state.actions[index].start);
    }

    dueItems = dueItems.map(function(elem, index) {
      return [elem, <button key={1000 * index + 1000}>X</button>]
    })


    return (
      <div>
        <ul>
          {listItems}
          
        </ul>
        <p>{"Productive hours: " + timeSpent}</p>
        <b>Things Due</b>
        <ul>
          {dueItems}
        </ul>
      </div>
    )
  }

}

Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — CertainPerformance, Sep 13 '20 at 20:12
All you need to do is change the `function`s to an arrow function, so `this` gets lexically inherited — CertainPerformance, Sep 13 '20 at 20:13
BTW (not related to your question), no need to bind componentDidUpdate and componentDidMount — Yossi, Sep 13 '20 at 20:13
@CertainPerformance I changed it to an arrow function ```onClick={() => this.handleRemove()}``` and tried binding and unbinding, but I get the same error — mg nt, Sep 13 '20 at 20:16
You need to change the `function`s to arrow functions, not the onclick callback — CertainPerformance, Sep 13 '20 at 20:17

score 0 · Answer 1 · answered Sep 14 '20 at 22:08

0

You need to change your handleRemove function with arrow function. You can do it like this

handleRemove = e => {
  //console.log(e.target.value)
  console.log('click')
}

answered Sep 14 '20 at 22:08

Sezerc

169
9

Getting undefined error in React even though function is bound

1 Answers1