Calling a component function from within a function in Reactjs

Question

I have a component that is laid out like this:

var Entry = React.createClass({
    // executes code on a button press.

    onButtonClick: function (event) {
       // (do stuff)
    },

    // generates the entry list with a button and some info.

    render: function() {
        var entryList= this.props.data.map(function(entry) {
            // (convert timestamp into relative time, add some tags etc)
            return (
                <p> entry.information </p>
                <a onClick={onButtonClick} className="btn right" id={entry.link}>
                    go
                </a>
            );
        });

        // returns the html of the component

        return (
            <div className="entryList">
                {entryList}
            </div>
        );
    }
});

I would like to be able to run the function onButtonClick from within the entryList variable in the render function but I can't seem to figure out how to do it. When running it the console says onButtonClick is not defined.

Uncaught ReferenceError: onButtonClick is not defined

How do I "escape" the function? I think that this.props.data.map(function(items) {}); is what is complicating the issue because I can access it just fine from if I move the button like this

        // returns the html of the component

        return (
            <div className="entryList">
                <a onClick={this.onButtonClick} className="btn right">go</a>
                {entryList}
            </div>
        );
    }
});

Thanks for your help!

You should set this for .map - this.props.data.map(function(entry) {}, this) — Oleksandr T.
– Oleksandr T., Commented Aug 29, 2016 at 15:38

Michael Parker · Accepted Answer · 2016-08-29 16:21:26Z

1

The reason your code isn't working the way you expect it to is because the context this changes inside of the anonymous function passed to map. map takes an optional second parameter, which represents the value of this that the callback will use. So simply adding this as a second argument to map will solve your problem.

var entryList = this.props.data.map(function(entry) {
    ...
}, this);

Developers who use ES2015 can also use an arrow function to automatically bind the correct context of this.

var entryList = this.props.data.map(entry => {
    ...
});

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

answered Aug 29, 2016 at 16:21

Michael Parker

13k7 gold badges41 silver badges58 bronze badges

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

1 Comment

arlyon Over a year ago

Thanks for your detailed response.

Rafi Ud Daula Refat · Accepted Answer · 2016-08-29 16:41:49Z

1

The context changes. So you can do this.

var Entry = React.createClass({
    // executes code on a button press.

    onButtonClick: function (event) {
       // (do stuff)
    },

    // generates the entry list with a button and some info.

    render: function() {
      var self = this;
        var entryList= this.props.data.map(function(entry) {
            // (convert timestamp into relative time, add some tags etc)
            return (
                <p> entry.information </p>
                <a onClick={self.onButtonClick} className="btn right" id={entry.link}>
                    go
                </a>
            );
        });

        // returns the html of the component

        return (
            <div className="entryList">
                {entryList}
            </div>
        );
    }
});

or simply

var Entry = React.createClass({
    // executes code on a button press.

    onButtonClick: function (event) {
       // (do stuff)
    },

    // generates the entry list with a button and some info.

    render: function() {
        var entryList= this.props.data.map(function(entry) {
            // (convert timestamp into relative time, add some tags etc)
            return (
                <p> entry.information </p>
                <a onClick={this.onButtonClick} className="btn right" id={entry.link}>
                    go
                </a>
            );
        },this);

        // returns the html of the component

        return (
            <div className="entryList">
                {entryList}
            </div>
        );
    }
});

edited Aug 29, 2016 at 16:41

answered Aug 29, 2016 at 15:42

Rafi Ud Daula Refat

2,25520 silver badges28 bronze badges

6 Comments

Oleksandr T. Over a year ago

it is not necessary store this to variable. You can set this for .map - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - just pass second argument!

Rafi Ud Daula Refat Over a year ago

thank. Yes that is another way. i am adding that in that answer.

Michael Parker Over a year ago

Arrow functions are also another option.

Rafi Ud Daula Refat Over a year ago

@michael he is not using es6 in his code as we can see his source code.

Oleksandr T. Over a year ago

@Michael Parker yes, however I don't see where author uses ES2015.

|

Collectives™ on Stack Overflow

Calling a component function from within a function in Reactjs

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related