Cannot read property 'removePerson' of undefined in ReactJs

Question

I am trying to delete a Person object from my table on the server using PersonId and a url. First I show the list of Person objects and next to each object I have a delete-button to delete the object. I am trying to pass the value of PersonId to the method removePerson(person). I am using this method as test to show the PersonIdto the console, but I am getting this error: Uncaught TypeError: Cannot read property 'removePerson' of undefined. This is my code:

return (
            <table id="myTable">
                <thead>
                <tr>
                    <th>Person id</th>
                    <th>Person name</th>
                    <th>Person Surname</th>
                    <th>Action </th>
                </tr>
                </thead>
                <tbody>
                {this.props.persons.map(function(person , i) {
                    return(
                        <tr key={i}>
                            <td>{person.PersontId}</td>
                            <td>{person.Name}</Link></td>
                            <td>{person.Surname}</td>
                            <td> <button className="btn btn-primary btn-xs" onClick={()=>this.removePerson({person})}
                                >Delete</button></td>
                        </tr>
                    );
                })}

                </tbody>
            </table>

The method I use as a test is:

removePerson(person) {
    console.log(person.PersonId); //Just a test to catch PersonId
}

But if I change onClick={()=>this.removePerson({person})} with onClick={()=>console.log({project})} I get the Person object to the console each time I click on Delete-button. Why I am getting this error and why I cannot pass the person object to removePerson(person)? - Thanks!

you forgot to `bind` the `map callback function`, use `arrow function`: `{this.props.persons.map((person , i) => {` — Mayank Shukla, May 15 '17 at 12:39

score 0 · Accepted Answer · answered May 15 '17 at 12:37

0

Use es6 arrow function ()=> instead of function . this inside callback function refer to the callback method.

  {this.props.persons.map((person , i)=> {
                return(
                    <tr key={i}>
                        <td>{person.PersontId}</td>
                        <td>{person.Name}</Link></td>
                        <td>{person.Surname}</td>
                        <td> <button className="btn btn-primary btn-xs" onClick={()=>this.removePerson({person})}
                            >Delete</button></td>
                    </tr>
                );
            })}

answered May 15 '17 at 12:37

Ved

11,837
5
42
60

`@Ved` I changed to es6 arrow function, but when I click the `delete`-button I am getting `undefined` in the console. Is `removePerson`-method incorrectly written? – carl May 15 '17 at 12:48
@carl your passing an object, `this.removePerson({person})` is like writing `this.removePerson({person: person})`, I'd replace it with ``this.removePerson(person)` – CD.. May 15 '17 at 12:52
Thanks `@Ved`. I see my fails now. – carl May 15 '17 at 12:56

score 0 · Answer 2 · answered May 15 '17 at 12:52

There are two problem with your code,

As @ved pointed out, You need to bind your map function to be able to use the this.removePerson() method
You are destructuring the person object and passing as argument to function. You don't need to do that. Change onClick={() => this.removePerson({person})} to onClick={() => this.removePerson(person)}

See the code below

 {this.props.persons.map((person , i)=> {
            return(
                <tr key={i}>
                    <td>{person.PersontId}</td>
                    <td>{person.Name}</Link></td>
                    <td>{person.Surname}</td>
                    <td> <button className="btn btn-primary btn-xs" onClick={()=>this.removePerson(person)}
                        >Delete</button></td>
                </tr>
            );
        })}

`@Shubham Khatri` Thanks for your explanation. – carl May 15 '17 at 13:03 — carl, May 15 '17 at 13:03

Cannot read property 'removePerson' of undefined in ReactJs

2 Answers2