Call a method into the class React ES6

Question

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?

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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'/>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 29, 2017 at 6:39

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

3 Comments

Yash Kochar Over a year ago

I have checked after removing static, the error is still there :(

Mayank Shukla Over a year ago

you used the same code that i suggested in answer ? it should work.

Mayank Shukla Over a year ago

check the updated answer, update section of answer it will work :), don't change the original ques because after that all the answer will not make any sense, to update the ques write a Edit section and inside that mention the another problem.

Przemysław Zalewski · Accepted Answer · 2017-05-29 07:13:42Z

2

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'/>

answered May 29, 2017 at 7:13

Przemysław Zalewski

4,0261 gold badge25 silver badges25 bronze badges

Comments

Björn Heiß · Accepted Answer · 2017-05-29 06:38:42Z

0

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

So it would be

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

answered May 29, 2017 at 6:38

Björn Heiß

1,7281 gold badge16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Call a method into the class React ES6

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related