title: React onClick function in map function
body: <p>I try to trigger an onClick event in a map function, and I get this error :</p>
  <p><strong>TypeError: Cannot read property 'handleClick' of undefined</strong></p>
  <p>How do we trigger an onClick event in a map function ?</p>
  <p>Here is my code :</p>
  <pre><code>class Component extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              isToggleOn: true,
          };
          this.handleClick = this.handleClick.bind(this);
      }
  
      handleClick() {
          this.setState((prevState) =&gt; ({
              isToggleOn: !prevState.isToggleOn,
          }));
      }
  
      render() {
          if (this.props.data) {
              var recipes = this.props.data.map(function (recipe, i) {
                  return (
                      &lt;div
                          key={i}
                          className=&quot;col-8 offset-col-1 f-l relative m-t-10&quot;
                      &gt;
                          &lt;div className=&quot;col-6 f-l&quot;&gt;
                              &lt;p className=&quot;col-8 f-l&quot;&gt;{recipe.title}&lt;/p&gt;
                              &lt;button className=&quot;f-l&quot; onClick={this.handleClick}&gt;
                                  Voir la recette
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  );
              });
          }
          return (
              &lt;div className=&quot;RecipeList&quot;&gt;
                  &lt;div className=&quot;col-12&quot;&gt;
                      {recipes}
                      &lt;div className=&quot;both&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>