React can not call method

Question

How to call method from different class. I was looking for React getting started, but all examples are about rendering component. i just want to set some variables.

I have tried this. How to call testMethod from class App?

     class App extends React.Component {
      constructor(props) {
        super(props);
       this.myRef = React.createRef();
       }  

    componentDidMount() {
    this.myRef.current.testMethod();
    {

    }

render(){
return(
<TestClass ref={this.myRef} />
)
}
    export default App;

Second class

  class TestClass extends React.Component 
{

    testMethod = () => {
        console.log("testMethod")
    }

    render(){
        return(
            <h1>Hello</h1>
        )
    }
}

but getting error

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Hi, Look at [this](https://stackoverflow.com/questions/37949981/call-child-method-from-parent) — Dominion, Jul 18 '18 at 07:22
Are you rendering the testClass component and assigning the ref instance to it — Shubham Khatri, Jul 18 '18 at 07:23
@ShubhamKhatri I dont want to render anything, just print something into console by calling method — Bobek, Jul 18 '18 at 07:27

score 0 · Answer 1 · answered Jul 18 '18 at 07:27

In order to make use of ref to access a component method, you would need render the component and assign the ref instance to it like

class App extends React.Component {
  constructor(props) {
    super(props);
    this.TestClass = React.createRef();
   }  

   componentDidMount() {
       this.TestClass.testMethod();
   }
   render() {
       return <TestClass ref={this.TestClass} />
   }
}
export default App;

or if you are not rendering the component inside the App, but you still want to class another component's method you could declare the method as static in your component, but if you do it, you won't be able to access this inside the method.

class TestClass extends React.Component {

    static testMethod(){
        console.log("testMethod")
    }

}

class App extends React.Component {
  constructor(props) {
    super(props);
   }  

   componentDidMount() {
       TestClass.testMethod();
   }

}
export default App;

score 0 · Answer 2 · edited Jul 18 '18 at 07:47

To call a testMethod() from inside App Class You have to pass it as props to App component :

class TestClass extends React.Component 
{
    testMethod = () =>{
        console.log("testMethod")
    }
render(){
return {
<App testMethod={testMethod} />  //How to access App?
}
}


 class App extends React.Component {
  constructor(props) {
    super(props);

   }  

componentDidMount() {
this.props.testMethod();
}
export default App;


}

扬眉剑出鞘 · Accepted Answer · 2018-07-18T08:58:55.427

When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property.

When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current.

So: in your App Class file

import * as React from 'react';
import TestClass from './TestClass';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    this.myRef.current.testMethod();
  }
  render() {
     return <TestClass ref={this.myRef} />
  }
}
export default App;

in your TestClass file:

import * as React from 'react';
class TestClass extends React.Component {
   testMethod = () => {
     console.log('test');
   }
   render() {
     return <div>Test</div>
   }
}
export default TestClass;

Your component must implement render() method, this error is not about ref. Notice TestClass No 'render' method found — 扬眉剑出鞘, Jul 18 '18 at 08:29
Are you export TestClass ? Like 'export default TestClass' and in App class you need import TestClass from './TestClass' if App and TestClass in the same folder — 扬眉剑出鞘, Jul 18 '18 at 08:40

React can not call method

3 Answers3