Javascript ES6 (React) How to use a method of an imported class?

Question

Using javascript ES6 (React), I'm not able to call a simple method of an imported class.

What's wrong with this code?

TypeError: WEBPACK_IMPORTED_MODULE_1__Seed.a.test is not a function

// App.js
import React from 'react';
import Seed from './Seed';

class App extends React.Component {

  constructor(props) {
    super(props);
    console.log('start1');
    Seed.test();
  }

  render() {
    return("ei");
  }

}

export default App;

and

// Seed.js
import React from 'react';

class Seed extends React.Component {

  constructor(props) {
    super(props);
    console.log('seed1');
  }

  test() {
    console.log('seed test');
  }

};

export default Seed;

Nicholas Tower · Accepted Answer · 2018-09-11 03:50:26Z

3

There are few options, depending on what you're trying to do

1) If this function is unrelated to an instance of a Seed, then make it static.

class Seed extends React.Component {
  static test() {
    console.log('seed test');
  }
  // ...etc
}

Then you can call it the way you're already calling it.

2) If it needs to be tied to a specific instance of a seed, you could new one up and then call it. For example:

const mySeed = new Seed();
mySeed.test();

Given that Seed is a react component this is very likely not what you want to do, since you should let react do the instantiating of components and then interact with it through props

3) Use refs to let react give you a reference to the component. I'll assume you're using react 16 or higher and thus have access to React.createRef

constructor(props) {
  super(props);

  this.seedRef = React.createRef();
}

componentDidMount() {
  this.seedRef.current.test();
}

render() {
  return <Seed ref={this.seedRef}/>
}

This is better, but its still questionable that you would want to interact with a component this directly.

4) Use props, don't call it directly. Exactly how to do this depends what you're trying to do, but suppose you want to only call the method if some condition is true. Then you could pass a prop in to the Seed, and the seed calls the method itself.

// in App:

render() {
  render <Seed shouldDoStuff={true} />
}

// In seed:

constructor(props) {
  super(props);
  if (props.shouldDoStuff) {
    this.test();
  }
}

answered Sep 11, 2018 at 3:50

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

5 Comments

GWorking Over a year ago

Thanks a lot, very complete answer. I've seen that I can also access to the method "indirectly" by setting the method as a getter (without declaring it as static). Could you please comment on that in your answer? Thanks again :)

Nicholas Tower Over a year ago

What is it you want to know about getters? They will be on the instance, not on the class, so they'll be very similar to bullet points 2-4

GWorking Over a year ago

If I write "get test() {...}" then I can access to Seed.test and execute the code inside the method. It is another way to execute the method I mean

Nicholas Tower Over a year ago

Getters are typically used to hide the fact that there's a function involved, but if you want to use one you can. As i said though, it will be on the instance, not the class. Seed.test will not work; (new Seed()).test will

GWorking Over a year ago

Yes, you're right. Somehow the Seed.test with the getter appeared to work a few minutes ago, but I cannot reproduce it now so ... thanks!

Giang Le · Accepted Answer · 2018-09-11 03:45:28Z

2

You can do that with declare test as static like this

class Seed extends React.Component {

  static test() {
    console.log('seed test');
  }

  constructor(props) {
    super(props);
    console.log('seed1');
  }

};

if you want call test in Seed component use Seed.test()

answered Sep 11, 2018 at 3:45

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

Comments

Dom · Accepted Answer · 2018-09-11 03:54:16Z

2

You cannot access a class' method like that since it's not static.

You would need to have App render with a <Seed /> and get a ref to that component.

// App.js
import React from 'react';
import Seed from './Seed';

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log('start1');
    this.seedRef = React.createRef();
  }

  componentDidMount() {
    // seedRef is the Seed instance
    this.seedRef.current.test();
  }

  render() {
    return(<Seed ref={this.seedRef} />);
  }
}

export default App;

edited Sep 11, 2018 at 3:54

answered Sep 11, 2018 at 3:46

Dom

40.7k12 gold badges56 silver badges83 bronze badges

Collectives™ on Stack Overflow

Javascript ES6 (React) How to use a method of an imported class?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related