# Calling Back end Services - 7 - Updating Data \[Error\]

**URL:** <https://forum.codewithmosh.com/t/calling-back-end-services-7-updating-data-error/3966>\
**Category:** React\
**Created:** [April 8, 2021, 1:11pm UTC](https://forum.codewithmosh.com/t/calling-back-end-services-7-updating-data-error/3966 "2021-04-08T13:11:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kvngamboa](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/kvngamboa/32/1404_2.png) [@kvngamboa](https://forum.codewithmosh.com/u/kvngamboa)\
**Post date:** [April 8, 2021, 1:11pm UTC](https://forum.codewithmosh.com/t/calling-back-end-services-7-updating-data-error/3966/1 "2021-04-08T13:11:45Z")

</div>

Hi coders!

Has anyone encountered the error from this [lecture](https://codewithmosh.com/courses/357787/lectures/5867630)? If so, can someone explain the solution to it please?

I can’t get passed by it as it keeps on showing this:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/a/ac0769c483659dd4650bf0dac70d7544c6b9679a.png)  
This error shows up, once I click on the update button.

Here’s the code I have for the **handleUpdate** method:

```
  handleUpdate = async (post) => {
    post.title = "UPDATED";
    await axios.put(apiEndPoint + "/" + post.id, post);

    const posts = [...this.state.posts];
    const index = posts.indexOf(post);
    posts[index] = { ...post };
    this.setState({ posts });
  };

```

And here’s the code I have for the app.js just incase someone asks for it:

```
import React, { Component } from "react";
import axios from "axios";
import "./App.css";

const apiEndPoint = "https://jsonplaceholder.typicode.com/posts";
class App extends Component {
  state = {
    posts: []
  };

  async componentDidMount() {
    const { data: posts } = await axios.get(apiEndPoint);
    this.setState({ posts });
  }

  handleAdd = async () => {
    const obj = {
      title: "a",
      body: "b"
    };
    const { data: post } = await axios.post(apiEndPoint, obj);
    console.log(post);

    const posts = [post, ...this.state.posts];
    this.setState({ posts });
  };

  handleUpdate = async (post) => {
    post.title = "UPDATED";
    await axios.put(apiEndPoint + "/" + post.id, post);

    const posts = [...this.state.posts];
    const index = posts.indexOf(post);
    posts[index] = { ...post };
    this.setState({ posts });
  };

  handleDelete = () => {
    console.log("Delete has been clicked");
  };

  render() {
    return (
      <React.Fragment>
        <button className="btn btn-primary mb-2" onClick={this.handleAdd}>
          Add
        </button>
        <table className="table">
          <thead>
            <tr>
              <th>Title</th>
              <th>Update</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            {this.state.posts.map((post) => (
              <tr key={post.id}>
                <td>{post.title}</td>
                <td>
                  <button
                    className="btn btn-info btn-sm"
                    onClick={this.handleUpdate}
                  >
                    Update
                  </button>
                </td>
                <td>
                  <button
                    className="btn btn-danger btn-sm"
                    onClick={this.handleDelete}
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </React.Fragment>
    );
  }
}

export default App;

```

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![sufian.babri](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sufian.babri/32/1028_2.png) [@sufian.babri](https://forum.codewithmosh.com/u/sufian.babri)\
**Post date:** [April 14, 2021, 2:08pm UTC](https://forum.codewithmosh.com/t/calling-back-end-services-7-updating-data-error/3966/2 "2021-04-14T14:08:15Z")

</div>

You’re setting every button’s onClick like this:

```auto
onClick={this.handleUpdate}

```

The above line is equivalent to:

```auto
onClick={(e) => this.handleUpdate(e)}

```

Since `handleUpdate` and `handleDelete` take `post` as an argument, to fix the problem you need to change it to:

```auto
onClick={() => this.handleUpdate(post)}

```

---

<div class="post-metadata">

**Author:** ![kvngamboa](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/kvngamboa/32/1404_2.png) [@kvngamboa](https://forum.codewithmosh.com/u/kvngamboa)\
**Post date:** [April 15, 2021, 5:58am UTC](https://forum.codewithmosh.com/t/calling-back-end-services-7-updating-data-error/3966/3 "2021-04-15T05:58:24Z")

</div>

@sufian.babri

Thank you sir! I found the solution somewhere, but you provided the explanation which is what I was looking for.  
👍