CODEWITHSUNDEEP
reactjses6-class
Yash Kochar
Yash Kochar

Reputation: 471

Call a method into the class React ES6

I have the following react class

export default class ValClass { 
    getValue (key) {
       return key;
    }
}

import React from 'react'
import ValClass from 'valclass'

export class Content extends React.Component {       

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

But I have the following error:

TypeError: _valClass2.default.getValue is not a function.

If i code like this 

export default class ValClass { }
ValClass.getValue (key) {
   return key;
}

import React from 'react'
import ValClass from 'valclass'

export class Content extends React.Component {       

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

Then its working fine. How?

Upvotes: 2

Views: 9425

Answers (3)

Mayank Shukla
Mayank Shukla

Reputation: 104369

Reason is, you defined that function as static, directly using this keyword it will not be accessible.

As per DOC:

Static method calls are made directly on the class and are not callable on instances of the class.

Static methods are not directly accessible using the this keyword from non-static methods. You need to call them using the class name: CLASSNAME.STATIC_METHOD_NAME() or by calling the method as a property of the constructor: this.constructor.STATIC_METHOD_NAME().

In order to call a static method within another static method of the same class, you can use the this keyword.

In you case i think you don't need a static method, instead of defining that as a static, write it like this:

class Content extends React.Component {

   getValue() {
      return "<div> Hello </div>";
   }

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

ReactDOM.render(<Content/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Update:

You changed the original question, if you defined another class and want to call a function of that then you need to define that as static.

class Content extends React.Component {

   render() {
      let value = App.getValue();
      return <div dangerouslySetInnerHTML={{__html: value}} />
   }
}

class App {
   static getValue() {
      return "<div> Hello </div>";
   }
}

ReactDOM.render(<Content/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Upvotes: 3

Przemysław Zalewski
Przemysław Zalewski

Reputation: 3986

Please add static keyword if you want to use the getValue in a static context when calling ValClass.getValue.

class ValClass { 
    static getValue (key) {
        return key;
    }
}

class Content extends React.Component {
   render() {
       let value = ValClass.getValue(this.props.valueKey);
       return <span dangerouslySetInnerHTML={{__html: value}} />
   }
}

ReactDOM.render(<Content valueKey="<strong>Hello</strong>" />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Upvotes: 2

Bj&#246;rn Hei&#223;
Bj&#246;rn Hei&#223;

Reputation: 1728

You have to call static-methods with "this.constructor."

So it would be

this.constructor.getValue(this.props.valueKey);

Upvotes: 0

Related Questions