attempting to create a static function within a react ponent. the function uses this to get its data, but this is out of scope when the function is called.

here is a very simple example:

var Test = React.createClass({
  val: 5,
  statics: {
    getVal: function() { return this.val }
  },
  render: return( <div>{this.val}</div> )
});

Test.getVal(); => undefined!!

obviously this has lost its scope when Test.getVal() is called. how to get this inside the getVal() function?

fyi, the following standard javascript parent approach does not work:

Test.getVal.apply( Test ); => undefined

attempting to create a static function within a react ponent. the function uses this to get its data, but this is out of scope when the function is called.

here is a very simple example:

var Test = React.createClass({
  val: 5,
  statics: {
    getVal: function() { return this.val }
  },
  render: return( <div>{this.val}</div> )
});

Test.getVal(); => undefined!!

obviously this has lost its scope when Test.getVal() is called. how to get this inside the getVal() function?

fyi, the following standard javascript parent approach does not work:

Test.getVal.apply( Test ); => undefined

• javascript
• this
• reactjs

• possible duplicate of Javascript objects: get parent – Bhojendra Rauniyar Commented Jul 23, 2015 at 4:20
• Have you considered storing val as a prop of the ponent and placing getVal outside of the statics block? Not sure if that is an option in your situation but it should make it easier to access the prop that way. – noveyak Commented Jul 23, 2015 at 4:27
• @BhojendraNepal - wish it were the same. will add example to question – cc young Commented Jul 23, 2015 at 4:31
• @noveyak - I thought the whole idea of static is that it's call outside the ponent in "regular" javascript, which is what I want to do – cc young Commented Jul 23, 2015 at 4:33

2 Answers 2

Check out the docs on statics.

Whatever you put in statics is not going to have the context of an actual React ponent instance, but the val property you're defining is a property of an actual React ponent instance. It's not going to exist before you actually render the ponent, because that's when all the non-static properties are constructed. Statics are supposed to be ponent-related functions that are usable outside the context of an actual instance, just like for example static functions in C# and many other languages.

It simply doesn't seem to make sense to want to access a React ponent instance from a statics function. Maybe you need to think over what you're actually trying to achieve. If you really want to be able to access a specific ponent's properties, then I guess you can pass the instance as an argument to the static function, but then of course that would be usable once you have actually constructed a ponent.

Ahh ok misunderstanding. If you need to somehow be able to call this method whenever then your val must be located in statics as well but your render function would then have to reference Test.val instead of this.val. If this isn't a requirement though it would be best to stick to props/state and accessing things from within the ponent since the ponent will not autoupdate based on changes to the val.

var Test = React.createClass({
  statics: {
    val: 5,
    getVal: function() { 
        return this.val
    }
  },
  render: function(){
      return( <div>{Test.val}</div> )
  }
});

console.log('VAL IS' , Test.getVal());

Link to fiddle with example https://jsfiddle/dgoks3Lo/