Call a static function into the class React ES6

Question

I have the following ReactJS class:

import React from 'react'

export class Content extends React.Component {

  static getValue(key) {
    return key
  }

  render() {
    let value = this.getValue(this.props.valueKey);
    return <span dangerouslySetInnerHTML={{__html: value}} />
  }
}

But I have the following error:

TypeError: this.getValue is not a function

I don't understand. Is this the good way to call a static function? I think react is doing something with statics, but I don't know what.

"is it the good way to call a static function ?" Since it doesn't work, probably not :P — Felix Kling
– Felix Kling, Commented Feb 27, 2016 at 18:06

Cymen · Accepted Answer · 2016-02-27 16:21:19Z

61

A static method needs to be accessed on the class not an instance. So in your case, use:

Content.getValue()

However, a static method won't be able to access this -- I don't think you want the method to be static based on your code sample above.

More: Static Members in ES6

answered Feb 27, 2016 at 16:21

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

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

1 Comment

Sprose Over a year ago

The 'getValue' function itself is static - so it can be called with this.constructor.getValue(params)... I use this method often in my code. I don't see a reason for this function not to be static, unless 'this' needs to be called inside the function.

score 19 · Accepted Answer · 2017-11-20 15:50:37Z

19

You can access from within the class as this.constructor.getValue.

Edit: I've added a JSFiddle here. The only change I made was adding the function call from the constructor and removing the dangerously set innerHTML - As shown, you can access the getValue static from this.constructor, and works just fine.

edited Nov 20, 2017 at 15:50

answered Feb 27, 2016 at 16:25

user5004821

5 Comments

Ajouve Over a year ago

Not with React.Component

user5004821 Over a year ago

Incorrect - you can. Trust me on this one. I'll add a JSBin

serdar.sanri Over a year ago

@GeoffreyAbdallah this is very interesting. So you can also pass instance object as parameter to static class and can still access it is props like it is not not static. very cool

Oliver Dixon Over a year ago

Interesting that we need to go though the constructor. Hm. Why is this?

skyboyer Over a year ago

@OliverDixon because "this.contrstructor" points on constructor function itself. so it's equal to Content.getValue but without need to hard code class name

Collectives™ on Stack Overflow

Call a static function into the class React ES6

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related