Can't bind callback function in React

Question

I'am trying to call a callback function in the parent, which is triggered inside the child component. I already tried the different ways of binding, but I still can't get it to work. I always get this error.

Cannot read property 'logMessage' of undefined

My Parent

logMessage() {
    console.log("logMessage was called");
  }

return(
      <div>
        <h1>Blogs</h1>
        {this.state.campaigns.map(function(blog) {
          return (
            <div key={blog._id}>
              <CampaignCard blog={blog} callBack={() => this.logMessage()} />
            </div>
          );
        })}
        <Link to="/campaigns/add">
          <button>Add Blog</button>
        </Link>
      </div>
    );

My child

  onConfirm={() => {
        this.setState({ show: false });
        this.props.callBack();
      }}

I can see that the callback function is called, but it still seems like this does not reference to the right place.

just use function return logMessage = () => { console.log("works"); } — max li, Jan 29 '18 at 14:50
you forgot to bind the map callback method, use arrow function there also, like this: `{this.state.campaigns.map((blog) => {....}` — Mayank Shukla, Jan 29 '18 at 14:55

Giorgi Moniava · Answer 1 · 2018-05-08T09:44:29.577

4

 {this.state.campaigns.map(function(blog) {
          return (
            <div key={blog._id}>
              <CampaignCard blog={blog} callBack={() => this.logMessage()} />
            </div>
          );
        })}

It is because it is inside map and for map you didn't use an arrow function. Because of that this refers to whatever this is inside map. Use something like:

render(){
let that = this;

.... // e.g. your map
    <CampaignCard blog={blog} callBack={() => that.logMessage()} />
...


}

edited May 08 '18 at 09:44

answered Jan 29 '18 at 14:49

Giorgi Moniava

27,046
9
53
90

Oddly enough he did not use the fat arrow for the map, but he did for the callback. – Murat Karagöz Jan 29 '18 at 14:51
@MuratK. I had some problems understanding the arrow binding, but I think I understand it now. – Fabio ha Jan 29 '18 at 14:54
@MuratK. yeah if he used arrow also in map it would be ok. – Giorgi Moniava Jan 29 '18 at 15:01

Ursus · Answer 2 · 2019-03-15T15:35:54.230

2

Two of some options

logMessage = () => {
   console.log("logMessage was called");
}

or

constructor(props) {
   super(props);
   this.logMessage = this.logMessage.bind(this);
}

edited Mar 15 '19 at 15:35

answered Jan 29 '18 at 14:48

Ursus

29,643
3
33
50

score 2 · Accepted Answer · answered Jan 29 '18 at 14:50

Use an arrow function for your map:

{this.state.campaigns.map((blog) => {
          return (
            <div key={blog._id}>
              <CampaignCard blog={blog} callBack={() => this.logMessage()} />
            </div>
          );
        })}

Otherwise, this refers to the map callback context.

score 0 · Answer 4 · answered Jan 29 '18 at 14:47

0

You need to bind the function in the parent:

constructor(props) {
    super(props);
    this.logMessage = this.logMessage.bind(this);
  }

answered Jan 29 '18 at 14:47

Rodius

2,271
14
19

Can't bind callback function in React

4 Answers4