use a function outside render method in reactjs

Question

I have a code like this:

//my_file.js

var React = require('react');
var ReactDom = require('react-dom');
var App = React.createClass({
    getInitialState:function(){
        return {//something};
    },
    myFunction:function(html){
        //some code
    },
    render:function(){
        //some code
        var someVar1, someVar2, someVar3;
        someVar1.map( function(i, j){
            someVar2.campos.map( function(k, j){
                someVar3.campos.map( function(z, k){
                    this.myFunction(something);
                }
            }
        }
        return (
            <div>
                { //something }
            </div>
        );
    }
});
module.exports=App;

my_file.js:16 Uncaught TypeError: this.myFunction is not a function. What I'm doign wrong? How I use that function inside the render?

this inside a function is probably points to window object not your component object. — Ivan Leonenko
– Ivan Leonenko, Commented Oct 27, 2016 at 15:37

Oleksandr T. · Accepted Answer · 2016-10-27 15:37:25Z

3

Problem is that in .map this refers to global scope not to your component. There are several ways how you can solve this problem

set this for each .map

someVar1.map( function(i, j){
  someVar2.campos.map( function(k, j){
    someVar3.campos.map( function(z, k){
      this.myFunction(something);
    }, this);
  }, this)
}, this)

store this in variable

var self = this;
someVar1.map( function(i, j){
  someVar2.campos.map( function(k, j){
    someVar3.campos.map( function(z, k){
      self.myFunction(something);
    });
  })
})

use arrow functions

someVar1.map( (i, j) => {
  someVar2.campos.map( (k, j) => {
    someVar3.campos.map( (z, k) => {
      this.myFunction(something);
    });
  })
})

answered Oct 27, 2016 at 15:37

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Collectives™ on Stack Overflow

use a function outside render method in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related