I'm learning React, I have 3 components:

* `App`, contains `UserList`
* `UserList`, contains a list of cards
* `UserCard`, the content of the previous component

Here's my `UserList` code:

```
 state = {
    users: [
      { id: 1, name: 'Chris', age: 20 },
      { id: 2, name: 'Max', age: 1 },
      { id: 3, name: 'Jean', age: 23 },
      { id: 4, name: 'Luc', age: 30 }
    ]
  }

  userList = this.state.users.map(user => {
    return (
    <div key={user.id} className="column">
      <UserCard name={user.name} age={user.age} onClick={this.userClickHandler} />
    </div>);
  });

  userClickHandler = () => {
    console.log('clicked !');
  };

  render() {
    return (
    <div className="columns">
      {this.userList}
    </div>);
  }

```

For some odd reason, my `userClickHandler` does not get triggered when a `UserCard` is clicked.

Note that I have tried the following:

Changing `onClick={this.userClickHandler}` to `onClick= () => {this.userClickHandler}` and that it works when I move the code of my `userList` in the render method without assigning it to a variable like so:

```
<div className="columns">     
  { this.state.users.map(user => {
    return (
    <div key={user.id} className="column" onClick={this.userClickHandler}>
      <UserCard name={user.name} age={user.age} />
    </div>);
  }) }
</div>);

```

What's the apparent problem?