Cannot read property 'XYZ' of undefined – Binding Issue

Question

I am just in the beginning of learning react and immediately have an issue about binding.

I always get the "Cannot read property 'onDismiss' of undefined"-Error and i have no idea how to fix this anymore. Tried multiple ways to bind 'this' correctly, but nothing works.

So here is the complete code of my App Component:

import React, { Component } from 'react';
import './App.css';

const list = [
{
title: 'React',
url: 'https://reactjs.org/',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0,
}, 
{
title: 'Redux',
url: 'https://redux.js.org/',
author: 'Dan Abramov',
num_comments: 2,
points: 5,
objectID: 1,
},
{
title: 'Reddit',
url: 'https://reddit.com/',
author: 'Crazy Guys',
num_comments: 2000,
points: 3,
objectID: 2,
}, 
];

class App extends Component {

constructor(props) {
super(props);

this.state = {
  list: list,
  list_title: 'Links',
};

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

onDismiss(id) {
console.log(id)
//const isNotId = item => item.objectID !== id;
//const updateList = this.state.list.filter(isNotId);
}

render() {
return (
  <div className="App">
    <h2>{this.state.list_title}</h2>
    {this.state.list.map(function(item) {
        return (
          <div key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>
              {item.author}
            </span>
            <span>
              {item.num_comments}
            </span>
            <span>
              {item.points}
            </span>
            <span>
              <button 
                onClick={() => 
                  this.onDismiss(item.objectID)}
                  type="button"
              >
              Dismiss
              </button>
            </span>
        </div>
        );
    })}
  </div>
);
}
}

export default App;

your map function callback doesn't have binding. Please check the duplicate post — Shubham Khatri, Jan 22 '19 at 10:24
just change your function inside map to an arrow function. `{this.state.list.map((item) => { ....... }` — Sahil Raj Thapa, Jan 22 '19 at 10:31

score 0 · Answer 1 · answered Jan 22 '19 at 10:23

0

This is happening because you are not binding the function to the onClick event handler.

onClick={this.onDismiss.bind(this,item.objectID)}

answered Jan 22 '19 at 10:23

Mayank Bansal

1,755
2
9
22

I do, here: – mrnb Jan 22 '19 at 10:28
OK, then what you can do is you can change your map function to arrow language. – Mayank Bansal Jan 22 '19 at 10:45
Yeah, thanks, that's the solution :) – mrnb Jan 22 '19 at 10:54

Danyal Imran · Accepted Answer · 2019-01-22T10:37:50.807

0

Change

<h2>{this.state.list_title}</h2>
{this.state.list.map(function(item) { ... }}

to

<h2>{this.state.list_title}</h2>
{this.state.list.map(item => { ... }}

edited Jan 22 '19 at 10:37

answered Jan 22 '19 at 10:24

Danyal Imran

2,515
13
21

Tried this myself, but it produces the same error. Do i have to alter the implementation of the onClick aswell? – mrnb Jan 22 '19 at 10:27
updated, check now @mrnb – Danyal Imran Jan 22 '19 at 10:37
Nice, that works. Now i have to process this answer, didn't get it ;) – mrnb Jan 22 '19 at 10:43
basically function(item) creates a new scope for the item variable, therefore rendering the 'this' keyword useless @mrnb – Danyal Imran Jan 22 '19 at 10:45
Ah and arrow functions doesn't create that, right? Ok, then it's fine ;) Thanks again. – mrnb Jan 22 '19 at 10:50

Cannot read property 'XYZ' of undefined – Binding Issue

2 Answers2