Click handler inside loop (two returns) not working (React JS)

Question

I have a pretty simple piece of React that loos over an array and outputs tab names. However my click handler no longer works (it worked before when I didn't have the loop).

The difference between this piece and before I had the .map loop is that this new piece has two returns in the render function. One for the outer div element that React requires, then one for the looping over the objects.

Does anyone how I can successfully get the click handler working again please?

Please see my component

class TabMenu extends React.Component {
constructor(props) {
    super(props);
    this.state = {

    };
    this.tabMenuList = [
      {
        title: 'My Account',
        section: 'MyAccount'
      },
      {
        title: 'Conference Details',
        section: 'MyAccount'
      },
      {
        title: 'My Abstract',
        section: 'MyAbstract'
      }
    ];
}
handleClick(e){
  e.preventDefault();

  console.log('this is the click handler', this);
  ReactDOM.render(<Conference />,document.getElementById('content'));
}
render() {

  return (
    <div>
      {this.tabMenuList.map(function(menuItem, index){
        return(
          <li data={menuItem.section}>
            <a onClick={this.handleClick.bind(this)} href={'#'}>
              <img src={'assets/img/mail_icon.jpg'} />
              <span>{menuItem.title}</span>
            </a>
          </li>
        )
      })}
    </div>
  );
}
}

you need to use a fat arrow on your `tabMenuList` map callback — Daniel Lizik, Mar 27 '17 at 13:29
`this` is NOT what you think it is inside of your `.map` function, as suggest above you need an arrow function. If you `console.log(this)`, you'll see it is referencing `Window` — Dan, Mar 27 '17 at 13:31
You may also need to change `onClick=onClick=` to just one `onClick=` — Dan, Mar 27 '17 at 13:34
Thanks for the quick replies, trying a few arrow functions but not working just yet. Would someone please mind showing me what the arrow function would look like please? I also removed the double onClick. That wasn't always there :) . — daniel blythe, Mar 27 '17 at 13:39
Dan, do you want to post it as and answer and I'll accept it? — daniel blythe, Mar 27 '17 at 14:08

score 2 · Accepted Answer · edited May 23 '17 at 10:30

Solution

Use an ES6 arrow function like so:

class TabMenu extends React.Component {
constructor(props) {
    super(props);
    this.state = {

    };
    this.tabMenuList = [
      {
        title: 'My Account',
        section: 'MyAccount'
      },
      {
        title: 'Conference Details',
        section: 'MyAccount'
      },
      {
        title: 'My Abstract',
        section: 'MyAbstract'
      }
    ];
}
handleClick(e){
  e.preventDefault();

  console.log('this is the click handler', this);
  ReactDOM.render(<Conference />,document.getElementById('content'));
}
render() {

  return (
    <div>
      {this.tabMenuList.map((menuItem, index) => {
        return(
          <li data={menuItem.section}>
            <a onClick={this.handleClick.bind(this)} href={'#'}>
              <img src={'assets/img/mail_icon.jpg'} />
              <span>{menuItem.title}</span>
            </a>
          </li>
        )
      })}
    </div>
  );
}
}

Why?

In your React code, this is not referencing TabMenu.

When declaring this within a function, it automatically defaults to the global object - Window in the case of your environment.

Since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object.

However, it's important to know that

In strict mode, however, the value of this remains at whatever it was set to when entering the execution context, so, in the following case, this will default to undefined.

Why? Because according to this question and the first answer, ES6 modules use strict by default and thus this within your function equals undefined.

Therefore,

In arrow functions, this is set lexically, i.e. it's set to the value of the enclosing execution context's this. In global code, it will be set to the global object

Your enclosing execution context is TabMenu.

MDN have a great article on this and how it varies depending on the context in which this is called in.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

Naveed Aheer · Answer 2 · 2017-03-27T14:11:28.610

0

Try this

<li data={menuItem.section}>
            <a onClick={this.handleClick.bind(this)} href={'#'}>
              <img src={'assets/img/mail_icon.jpg'} />
              <span>{menuItem.title}</span>
            </a>
          </li>

instead of

<li data={menuItem.section}>
            <a onClick=onClick={this.handleClick.bind(this)} href={'#'}>
              <img src={'assets/img/mail_icon.jpg'} />
              <span>{menuItem.title}</span>
            </a>
          </li>

or you can remove second return may be it will work

edited Mar 27 '17 at 14:11

answered Mar 27 '17 at 13:38

Naveed Aheer

1,715
6
25
40

Thanks for the reply but I can't see any difference in the first suggestion? – daniel blythe Mar 27 '17 at 13:41
sorry I forgot to edit answer, now you can check. you wrote onClick two times – Naveed Aheer Mar 27 '17 at 14:12

Click handler inside loop (two returns) not working (React JS)

2 Answers2