in a react component, how to get `this` in static function?

Question

attempting to create a static function within a react component. 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

possible duplicate of [Javascript objects: get parent](http://stackoverflow.com/questions/2980763/javascript-objects-get-parent) — Bhojendra Rauniyar, Jul 23 '15 at 04:20
Have you considered storing val as a prop of the component 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, Jul 23 '15 at 04:27
@BhojendraNepal - wish it were the same. will add example to question — cc young, Jul 23 '15 at 04:31
@noveyak - I thought the whole idea of `static` is that it's call outside the component in "regular" javascript, which is what I want to do — cc young, Jul 23 '15 at 04:33

Hannes Johansson · Accepted Answer · 2015-07-23T09:48:29.640

Check out the docs on statics.

Whatever you put in statics is not going to have the context of an actual React component instance, but the val property you're defining is a property of an actual React component instance. It's not going to exist before you actually render the component, because that's when all the non-static properties are constructed. Statics are supposed to be component-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 component 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 component'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 component.

score 0 · Answer 2 · answered Jul 23 '15 at 04:43

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 component since the component 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.net/dgoks3Lo/

thank you, but I am afraid my example was too simple (and probably incorrect). I wish the answer to the general question, viz, if you don't move `val` inside `statics`, how do you get access to `val` from a static function? can you? if you cannot, it seems statics are pretty useless. — cc young, Jul 23 '15 at 05:13

in a react component, how to get `this` in static function?

2 Answers2