React onClick function in map function

Question

I try to trigger an onClick event in a map function, and I get this error :

TypeError: Cannot read property 'handleClick' of undefined

How do we trigger an onClick event in a map function ?

Here is my code :

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn: true,
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState((prevState) => ({
            isToggleOn: !prevState.isToggleOn,
        }));
    }

    render() {
        if (this.props.data) {
            var recipes = this.props.data.map(function (recipe, i) {
                return (
                    <div
                        key={i}
                        className="col-8 offset-col-1 f-l relative m-t-10"
                    >
                        <div className="col-6 f-l">
                            <p className="col-8 f-l">{recipe.title}</p>
                            <button className="f-l" onClick={this.handleClick}>
                                Voir la recette
                            </button>
                        </div>
                    </div>
                );
            });
        }
        return (
            <div className="RecipeList">
                <div className="col-12">
                    {recipes}
                    <div className="both"></div>
                </div>
            </div>
        );
    }
}

your this points to the map function where no handleClick function definition exists. You need to instantiate a variable with this outside the map and use it inside your map — Aseem Upadhyay
– Aseem Upadhyay, Commented Jun 21, 2018 at 10:10

Tholle · Accepted Answer · 2018-06-21 10:36:30Z

10

Use an arrow function as the function given to map instead and this will be what you expect:

if (this.props.data) {
  var recipes = this.props.data.map((recipe, i) => {
    return <div key={i} className="col-8 offset-col-1 f-l relative m-t-10">
      <div className="col-6 f-l">
        <p className="col-8 f-l">{recipe.title}</p>
        <button className="f-l" onClick={this.handleClick}>Voir la recette</button>
      </div>
    </div>;
  });
}

Why this is the case is explained in detail here. Arrow functions don't provide their own this binding, but instead retains the this value of the enclosing lexical context.

edited Jun 21, 2018 at 10:36

answered Jun 21, 2018 at 10:08

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kavindu Wijesuriya · Accepted Answer · 2018-06-21 10:20:32Z

This is how I would tackle a similar situation.

import React from "react";
import ReactDOM from "react-dom";

const stuff = ["one", "two", "three"];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(val) {
    console.log(val);
  }

  getStuff() {
    var elements = stuff.map((value, key) => {
      return (
        <li key={key} onClick={() => this.handleClick(value)}>
          {value}
        </li>
      );
    });

    return elements;
  }
  render() {
    return <ul>{this.getStuff()}</ul>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

here is the sandbox -> https://codesandbox.io/embed/1rqw081oj7

jlvaquero · Accepted Answer · 2018-06-21 10:22:17Z

You have to use this in map arguments or arrow function.

 this.props.data.map(function(recipe, i) {
            return  <div key={i} className="col-8 offset-col-1 f-l relative m-t-10">
                        <div className="col-6 f-l">
                            <p className="col-8 f-l">{recipe.title}</p>
                            <button className="f-l" onClick={this.handleClick}>Voir la recette</button>
                        </div>
                    </div>;
        }, this)

Why?

Read here.

If a thisArg parameter is provided to map, it will be used as callback's this value. Otherwise, the value undefined will be used as its this value.

For a better undestanding of this scope check here. Explains what are in this in different context like Simple function call, as an object method, as arrow function, etc. Also explain how control the scope thanks to bind, call and apply.

Collectives™ on Stack Overflow

React onClick function in map function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related