On button click in ReactJs it says "Cannot read property edit name of undefined"

Question

I am trying to edit the value from table and put it in textbox. When I Click edit button it says "Cannot read property edit name of undefined". I have used fat arrow functions. I also used bind in the constructor but it has same error. Below is My Code. When Clicked on editName button, it gives error.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onNameChange = this.onNameChange.bind(this);
    this.onSurnameChange = this.onSurnameChange.bind(this);
    this.onIdChange = this.onIdChange.bind(this);
    this.editName = this.editName.bind(this);
    this.state = {
      data: "",
      name: "",
      surname: "",
      id: ""
    };
  }

  componentDidMount() {
    axios.get("http://localhost:4000/employees").then((response, err) => {
      if (err) {
        console.log("err");
      }
      this.setState(prevstate => ({
        data: response.data
      }));
    });
  }
  handleSumbit(e) {
    axios
      .post("http://localhost:4000/employees", {
        name: this.state.name,
        surname: this.state.surname,
        id: this.state.id
      })
      .then((response, err) => {
        if (err) {
          console.log("Error While Posting Data", err);
        }
        console.log("RESPONSE FROM POST", response);
      });
  }
  onNameChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  onSurnameChange(e) {
    this.setState({
      surname: e.target.value
    });
  }
  onIdChange(e) {
    this.setState({
      id: e.target.value
    });
  }
  editName(value) {
    this.setState({
      name: value
    });
  }
  editSurname(e, value) {
    this.setState({
      surname: value
    });
  }

  render() {
    const { data } = this.state;
    return (
      <div className="container">
        <div>
          <label className="">Name</label>
          <input
            type="text"
            name=""
            value={this.state.name}
            onChange={e => this.onNameChange(e)}
          />
        </div>
        <div>
          <label className="">Surname</label>
          <input
            type="text"
            name=""
            value={this.state.surname}
            onChange={e => this.onSurnameChange(e)}
          />
        </div>
        <div>
          <label className=""> YOUR ID </label>
          <input
            type="number"
            name=""
            value={this.state.id}
            onChange={e => this.onIdChange(e)}
          />
        </div>
        <div>
          <button type="button" onClick={e => this.handleSumbit(e)}>
            Sumbit
          </button>
        </div>

        <div className="main-container">
          {data &&
            data.map(function(data, key) {
              return (
                <React.Fragment>
                  <div className="child">
                    {data.name}
                    <button onClick={e => this.editName("Samar")}>Edit</button>
                  </div>
                  <div className="child">
                    {data.surname}
                    <button onClick={e => this.editSurname(e, data.surname)}>
                      Edit
                    </button>
                  </div>
                </React.Fragment>
              );
            })}
        </div>
      </div>
    );
  }
}

export default App;

Possible duplicate of [How do I get the right "this" in an Array.map?](https://stackoverflow.com/questions/31866390/how-do-i-get-the-right-this-in-an-array-map) — Dan O, Nov 21 '19 at 12:19
specifically, you're passing an anonymous non-fat-arrow `function` to `Array.map` which means your `this` is undefined. use a fat-arrow function or use `Function.bind`. — Dan O, Nov 21 '19 at 12:21
@DanO But `this` isn't undefined in function expression. It just points to other object. — kind user, Nov 21 '19 at 12:22

score 2 · Accepted Answer · answered Nov 21 '19 at 12:31

2

I have noticed (as @DanO said) this becomes not a window object but a undefined when using inside map function in render method. The solution is dead simple, either change it to arrow function (preferred) or use Function.prototype.bind.

data.map((data, key) => (<>...</>))

answered Nov 21 '19 at 12:31

lankovova

1,396
8
15

This is interesting. I wouldn't ever imagine that this can be undefined inside map in render ;oo Anyone knows why? – kind user Nov 21 '19 at 12:35
1

@kinduser https://tc39.es/ecma262/#sec-array.prototype.map - "If a thisArg parameter is provided, it will be used as the this value for each invocation of callbackfn. If it is not provided, undefined is used instead." – Dan O Nov 21 '19 at 12:53

On button click in ReactJs it says "Cannot read property edit name of undefined"

1 Answers1